仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个独立元素的情况下完成这一点。

尝试时:

p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>

看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。


当前回答

CSS 3为您的问题提供了一个简单的解决方案。使用:

background-color:rgba(0, 255, 0, 0.5);

这里,rgba代表红色、绿色、蓝色和alpha值。由于255而获得绿色值,并且通过0.5α值获得半透明度。

其他回答

几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景,那么目前唯一真正的解决方案就是JavaScript,就像其他地方提到的jQueryTransify插件一样。

我们需要做的是加入CSS工作组讨论,让他们给我们一个背景不透明度属性!它应该与多背景功能一起工作。

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/?

由于很多人会来到这里,想知道如何调整任何元素(而不仅仅是背景)的不透明度,所以只需在该元素的CSS中添加不透明度:0.2(或您希望的0到1之间的任何数字)即可。

实例

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

这可以用于背景、标题、段落等。

当使用#AARGGBB格式时,它对我有效,因此对我有效的格式是#1C00ff00。试试看,因为我看到它对某些人有效,而对其他人无效。我在CSS中使用它。

如果你使用的是Less,你可以使用褪色(颜色,30%)。