背景色的半透明

yan_zhizi3

于 2014-06-11 15:47:54 发布

阅读量433

点赞数 1

本文链接：https://blog.youkuaiyun.com/yan_zhizi3/article/details/30062921

版权

本文介绍了三种使用CSS实现背景透明的方法，包括针对不同浏览器的支持情况。第一种方法通过设置背景颜色和透明度属性实现简单透明效果；第二种方法解决了第一种方法中文字也变得透明的问题，实现了仅背景透明的效果；第三种方法则是通过外部资源提供的解决方案。

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

第一种：
.content{
background-color: #000000;
/* other browsers */
opacity: 0.4;
/* this works in IE6, IE7, and IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* this works in IE8 only */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";

}

第二种：
第一种有个弊端就是当前类下的所有元素都会透明
.content .content_page {
float: right;
width: 738px;
margin-right: 6px;
_margin-right:3px;
background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=40);
background:#000000;/*实现IE背景透明*/
}
.content_page img,dt,dd{ position:relative;}/*具体是实现内容不透明*/