透明度继承问题

最新推荐文章于 2024-02-09 12:46:07 发布

子君不语

最新推荐文章于 2024-02-09 12:46:07 发布

阅读量1.2k

点赞数 1

分类专栏： css 兼容

css 同时被 2 个专栏收录

37 篇文章

订阅专栏

兼容

14 篇文章

订阅专栏

本文介绍了如何使用CSS3实现父层透明而子层不透明的效果，并提供了针对不同浏览器的兼容性解决方案，包括使用RGBA背景颜色及滤镜效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.用过可以的

CSS3属性规则里rgba 已经可以设置实现父层透明，子层不透明了，CSS3 还不能兼容一些比较老版本的浏览器，我们要一些处理：

<div class=”child”>我透明了吗</div>

</div>

//样式

.father{height:400px;background:rgba(0,0,0,0.6)!important;background:#000;filter:Alpha(opacity=60);}

.child{height:200px; background-color:#f00; position:relative; }// 此时完美的实现了child 内部元素已经不透明(为了照顾IE7，ie8必须加个position属性让child脱离文本流)

原文转载自：http://www.wfuns.com/?p=142

2.待测所有浏览器下的CSS透明度

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

但是使用opacity会影响其后代元素的透明度，我们可以考虑使用：

.transparent {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
}
3.使用生成器