仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时:
p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>
看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。
仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时:
p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>
看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。
当前回答
几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景,那么目前唯一真正的解决方案就是JavaScript,就像其他地方提到的jQueryTransify插件一样。
我们需要做的是加入CSS工作组讨论,让他们给我们一个背景不透明度属性!它应该与多背景功能一起工作。
其他回答
CSS 3为您的问题提供了一个简单的解决方案。使用:
background-color:rgba(0, 255, 0, 0.5);
这里,rgba代表红色、绿色、蓝色和alpha值。由于255而获得绿色值,并且通过0.5α值获得半透明度。
由于很多人会来到这里,想知道如何调整任何元素(而不仅仅是背景)的不透明度,所以只需在该元素的CSS中添加不透明度:0.2(或您希望的0到1之间的任何数字)即可。
实例
.myclass {
color: #eb4746;
opacity: 0.2;
}
这可以用于背景、标题、段落等。
几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景,那么目前唯一真正的解决方案就是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/?
最好使用半透明.png。
只需打开Photoshop,创建一个2x2像素的图像(选择1x1可能会导致Internet Explorer错误!),用绿色填充,并将“图层选项卡”中的不透明度设置为60%。然后保存它并使其成为背景图像:
<p style="background: url(green.png);">any text</p>
当然,它很酷,除了在可爱的InternetExplorer6中。有更好的修复方法可用,但这里有一个快速破解方法:
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}