css3整理--rgba
rgba语法:
rgba(0, 0, 0,0.5);
第一个参数:R 红色(0-255)
第二个参数:G 绿色(0-255)
第三个参数:B 蓝色(0-255)
第四个参数:透明度(0-1)
使用rgba指定颜色的好处是:任何位置的颜色,使用rgba指定,都可以通过设置第四个参数来调整透明度。不仅仅可以设置背景色的透明度。
使用rgba指定背景透明和使用opacity指定背景颜色的透明度的区别:
1、使用opacity指定背景颜色的透明度时,其内容也一起被设置透明度,导致内容模糊。如果不想内容模糊,只能如下处理:
(单独设置一个元素做背景透明设置,其内容反而不在它内部)
<div class="bg">
</div>
<div class="bg-content">
<p>我是bg的后代元素,我不想我的前景有任何透明!怎么办?</p>
</div>
2、使用rgba指定背景颜色,可以通过调整最后一个参数值小于1来设置背景透明,而不会影响其内部的元素透明度
css3整理--rgba的更多相关文章
- 使用IE滤镜实现css3中rgba让背景色透明的效果
让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...
- css3整理-方便查询使用
最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...
- CSS3 之 RGBa 可透明颜色
在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这 ...
- CSS3:RGBA的使用方法
1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...
- 关于css3的rgba
在rgba之前,我们应该知道rgb.它就是红色R+绿色G+蓝色B.那rgba是什么?简单的说就是在rgb的基础之上加上一个通道alpha.他的语法如下: r 红色值.正整数(0~255) | 百 ...
- Css3颜色值RGBA得表示方式
RGBA(R,G,B,A) 取值 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数 | 百分数 A:Alpha透明度.取值0~1之间. 说明: RGBA记法. 此色彩 ...
- css3整理--text-shadow
text-shadow语法: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) ...
- css3整理--box-shadow
box-shadow语法:(想法:用阴影来做边框,就不会出现动态改变边框宽度而产生的重排问题) 对象选择器{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 ...
- 【CSS3】rgba与opacity
RGBA 语法 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 为什么要用RGBA而不用opacity 因为在项目中需要用到一 ...
随机推荐
- jQuery 文件上传插件:uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
- springMVC工程使用jreloader实现热部署
springMVC工程使用jreloader实现热部署applicationContext - ContextLoaderListener重新加载DispatcherServlet 重新加载提高开发效 ...
- 【玩转Golang】 通过组合嵌入实现代码复用
应用开发中的一个常见情景,为了避免简单重复,需要在基类中实现共用代码,着同样有助于后期维护. 如果在以往的支持类继承的语言中,比如c++,Java,c#等,这很简单!可是go不支持继承,只能mixin ...
- 使用 resizableImageWithCapInsets 方法实现可伸缩图片
之前介绍过通过 stretchableImageWithLeftCapWidth:topCapHeight: 方法来实现可伸缩图片: 可看这篇随笔:使用 stretchableImageWithLef ...
- Android技巧分享——如何用电脑下载在Google play中应用的apk文件
[Android技巧分享系列] 1.Android技巧分享——让官方模拟器和genymotion虚拟机飞起来 2.Android技巧分享——如何用电脑下载在Google play中应用的apk文件 G ...
- NSIS 资料
官方 http://nsis.sourceforge.net/Main_Page NSIS官方插件全集 http://az.eliang.com/aq_2013041703.html NSIS 衿华客 ...
- 设计模式之初识IoC/DI(六)
本篇和大家一起学习IoC和DI即控制反转和依赖注入. 当然听上去这词语非常的专业,真不知道是怎么组出来的,看上去难归看上去难,但稍微理解一下也就这么回事了. 首先我们要明白IoC/DI干嘛用的,不然别 ...
- IE每次关闭都提示IE已停止工作
方法一:打开IE浏览器,点击工具,选择下拉菜单中的internet选项,切换至高级选项卡标签,找到“启用第三方浏览器扩展”选项.把前面的打勾去掉: 方法二:打开IE浏览器,不管是6.0还是更高的版本这 ...
- Linux-PAM认证机制
http://www.cnblogs.com/marility/articles/9235522.html https://www.jianshu.com/p/342c05b51b7c https:/ ...
- phonegap入门–1 Android 开发环境搭建
一.JDK 安装JDK,安装包中包含了JDK和JRE两部分,建议将它们安装在同一个盘符下面. 配置环境变量: 1.右键点击我的电脑,选择属性,点击高级选项卡,选择环境变量. 2.找到Path变量名(无 ...