我想要做的是有一个不影响文本的透明背景的div
。考虑以下HTML:
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
如果我给它以下CSS:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
该文本将受到section
的透明度的影响。所以,我开始尝试像这样分层内容:
<div class="code-sample">
<div class="background"></div>
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
</div>
然而,由于迭代次数可枚举,我无法使section
在div
之上分层。老实说,我已经尝试过将内部div
和section
定位为绝对和相对。我试过使用z-index
。但实际上,我只是在黑暗中拍摄。我希望.background
有一个透明的外观:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
但是CCD_ 9随后覆盖该CCD_。这将允许我浮动.code-sample
div,并使用它们进行三列布局。
我如何才能实现我想要的目标?
使用RGB颜色仅设置背景的透明度:
.class {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: 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)";
}
源
不需要额外的背景div,在.section上使用RGBA值可以获得不影响子元素的半透明背景
.content {
background: rgba(0, 0, 0, 0.2)
}
在Firefox中使用RGBa有时会给文本带来粗糙的边缘。因此,在某些情况下,使用半透明的png作为背景可能会更好(可能使用数据uri)。