您现在的位置是：网站首页> 编程资料编程资料

常用的四种CSS透明属性介绍CSS通过RGBa将一个元素设置为透明效果使用css3背景渐变中的透明度来设置不同颜色的背景渐变css中filter:alpha透明度使用小结兼容IE、火狐 IE6不支持opacity半透明 BUG的解决方法div+css设置div的背景为半透明的方法css背景色透明内容不透明的解决方法(兼容所有浏览器)

2023-10-26 271人已围观

简介透明往往能产生不错的网页视觉效果，常用于遮罩层，图片半透明，透明渐变，顶栏，图文配标题等等，兼容主流浏览器的css有几种不同的写法，常用的有四种

如下代码：

复制代码

代码如下:

.mask-layer {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}

上面的几个属性分别是：

复制代码

代码如下:

opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

CSS透明度继承问题

但CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度，比如这样的一个效果:

即使你又为子元素指定透明度为1也是无效的。

对于子元素是文字的情况，我的解决方法一般是如果多少还能够看清，就不管。另一个折衷的方法是，为文本子元素指定一个相对更深的颜色。也就是说，当子元素继承透明度后，所得到的文本颜色正好就是你想要的。前提是，这个颜色还有加深的可能，和需要详细的计算颜色和透明度的值。

还有一种方法就是，透明层独立出来，如下代码，先.mod设置position:relative;然后.mask-layer设置position:absolute;z-index:1;最后.title设置position:absolute;z-index:2;

复制代码

代码如下:

小清新，你喜欢吗

上一篇：bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略语等用法)bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移bootstrap3.0教程之栅格系统原理(布局)Bootstrap 学习分享Bootstrap 基于jquery的简洁灵活的流行前端框架及交互组件集MCEWMDRMNDBootstrap.dll

下一篇：网页布局之响应式设计简明指南CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)css3的@media属性实现页面响应式布局示例代码跨浏览器和响应式的jQuery网格布局瀑布流插件Freewall支持IE8的纯css3开发的响应式设计动画菜单教程浅谈html5 响应式布局

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢