概念介绍

  • rgba(r,g,b,a) r,g,b分别是颜色r g b的值(0-255),a表示透明度(0-1)。

    rgba(r,g,b,a)
  • opacity: value; value是具体数值,0-1之间 。0:完全透明, 1:完全不透明
    opacity: value;  

区别

opacity 子元素颜色会被影响,即变相的被继承。rgba(r,g,b,a)不会。举例看下效果,同样一段html

  <div class="mask">
<img src="img/nochance.png" class="nochance">
</div>

1. 使用opacity处理

 .mask {
background-color: #000;
opacity: .7;
text-align: center;
} .nochance {
width: 80%;
}

2. 使用grba

.mask {
background: rgba(0, 0, 0, .7);
padding-top: 30%;
text-align: center;
}
.nochance {
width: 80%;
}

opacity 与rgba区别的更多相关文章

  1. 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  3. rgba()和opacity之间的区别(面试题)

    rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: ...

  4. 雪碧图(background-position)、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...

  5. 深入了解opacity和rgba

    1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) - r为红色值, 正整数 | 百分数 - g为绿色值,正整数 | 百分数 - b为蓝色值,正整数 | 百分数 - a为alpha( ...

  6. opacity与RGBA透明的区别

    为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度 ...

  7. opacity与rgba

    background: rgba(255,255,255,0.6);容器本身透明度变化,它包含的子容器的透明度不变. opacity:0.6;容器及容器包含的子容器的透明度都会发生变化.

  8. 有关opacity或RGBA设置颜色值及元素的透明值

    opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化   opacity声明来 ...

  9. ie6-ie8不支持opacity,rgba解决方法

    半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...

随机推荐

  1. VirtualDOM与diff(Vue实现)

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  2. laypage 使用

    最近发现一个特别好用的前端分页插件,分享一下 <!doctype html> <html> <head> <meta charset="utf-8& ...

  3. web项目中js加载慢问题解决思路

    最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...

  4. 高可用之KeepAlived(2):keepalived+lvs

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  5. Nginx限流办法

    Nginx 限流 电商平台营销时候,经常会碰到的大流量问题,除了做流量分流处理,可能还要做用户黑白名单.信誉分析,进而根据用户ip信誉权重做相应的流量拦截.限制流量.Nginx自身有的请求限制模块ng ...

  6. 编程中&和&&的区别

    逻辑电路中用&: 与门电路,全真为真,有假为假. 编程中:&表示取地址符(C)和 按位与(非bool类型时,转换成二进制,按位与运算). &&表示逻辑与运算,& ...

  7. PHP opcache扩展安装

    下面是我在PHP 5.4下的安装方法: https://pecl.php.net/get/zendopcache-7.0.5.tgz tar xzf zendopcache-7.0.5.tgz cd ...

  8. 轻松掌握VS Code开发.Net Core及创建Xunit单元测试

    前言 本篇文章主要还是介绍使用 VS Code 进行.Net Core开发和常用 CLI命令的使用,至于为啥要用VS Code ,因为它是真的是好看又好用 :) ,哈哈,主要还是为了跨平台开发做准备. ...

  9. Shiro登录成功之后跳到指定URL

    通常我们使用shiro,登录之后就会跳到我们上一次访问的URL,如果我们是直接访问登录页面的话,shiro就会根据我们配置的successUrl去重定向,如果我们没有配置successUrl的话,那么 ...

  10. SpringBoot整合SpringSecurity,SESSION 并发管理,同账号只允许登录一次

    重写了UsernamePasswordAuthenticationFilter,里面继承AbstractAuthenticationProcessingFilter,这个类里面的session认证策略 ...