是否有可能,仅使用CSS,使元素的background
半透明,但使元素的内容(文本和图像)不透明?
我希望在不将文本和背景作为两个单独的元素的情况下实现这一点。
尝试时:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
<p>
<span>Hello world</span>
</p>
看起来子元素受制于其父元素的不透明度,因此opacity:1
是相对于父元素的opacity:0.6
的。
发布于 2010-07-14 04:51:05
这是我能想到的最好的解决方案,而不是使用CSS3。据我所知,它在Firefox,Chrome和Internet Explorer上运行得很好。
将一个容器div
和两个子div
放在同一级别,一个用于内容,一个用于背景。使用CSS,自动调整背景大小以适合内容,并使用z-index将背景实际放在后面。
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
<div class="container">
<div class="content">
Here is the content.
<br/>Background should grow to fit.
</div>
<div class="background"></div>
</div>
发布于 2012-01-14 08:14:59
此方法允许您在背景中具有图像,而不仅仅是纯色,并且可以用于在其他属性上具有透明度,例如边框。不需要透明的PNG图像。
在CSS中使用:before
(或:after
),并为它们提供不透明度值,以使元素保持原始不透明度。因此,您可以使用:before来创建一个人造元素,并为其提供所需的透明背景(或边框),然后将其移动到您希望使用z-index
保持不透明的内容后面。
一个示例(fiddle) (请注意,带有dad
类的DIV
只是为了提供一些上下文和颜色的对比度,实际上并不需要这个额外的元素,红色矩形向下和向右移动了一点,以使fancyBg
元素后面的背景可见):
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
使用此CSS:
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
在本例中,.fancyBg:before
具有您希望具有透明度的CSS属性(本例中为红色背景,但可以是图像或边框)。它被定位为绝对的,以将其移动到.fancyBg
之后(使用零值或任何更适合您需要的值)。
发布于 2011-01-27 00:36:17
几乎所有这些答案都假设设计师想要纯色背景。如果设计师真的想要一张照片作为背景,目前唯一真正的解决方案是JavaScript,就像jQuery转换插件mentioned elsewhere一样。
我们需要做的是加入CSS工作组的讨论,让他们给我们一个背景-不透明属性!它应该与多背景功能协同工作。
https://stackoverflow.com/questions/806000
复制相似问题