团队里经常遇到,索性整理一起
是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明
和整体透明
先说下背景色透明,背景色透明,在现代浏览器中,可以用rgba颜色作为背景色。
简单介绍下rgba色,这个是在css3 出现的标准。所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。通过改变a的值来改变透明度。
background:rgba(200, 54, 54, 0.5);
这个颜色就是透明度为0.5的颜色背景,
如何处理兼容如果想要IE也支持颜色透明,那就要动用IE的私有滤镜FILTER:progid:DXImageTransform.Microsoft.Gradient
兼容写法实例:
background:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
这里的7F
是十六进制的表达方式,00 为最小的透明度(完全透明)FF为最大透明值(完全不透明)
下面说下整体透明
整体透明区别于背景色透明就是整个元素的都是透明的,在css3新的标准中为opacity: .5;
兼容IE的写法
/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);