仅使用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。
当前回答
如果你使用的是Less,你可以使用褪色(颜色,30%)。
其他回答
最简单的方法是使用半透明背景PNG图像。
如果需要,可以使用JavaScript使其在InternetExplorer6中工作。
我使用Internet Explorer 6中透明PNG中概述的方法。
除此之外,您可以使用两个并排的兄弟元素来伪装它-使一个半透明,然后将另一个绝对放置在顶部。
最好使用半透明.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');
}
我通常在工作中使用这门课。很好。
.透明{过滤器:alpha(不透明度=50);/*Internet Explorer*/-khtml不透明度:0.5;/*KHTML和旧Safari*/-moz不透明度:0.5;/*Firefox和Netscape*/不透明度:0.5;/*Firefox、Safari和Opera*/}
由于很多人会来到这里,想知道如何调整任何元素(而不仅仅是背景)的不透明度,所以只需在该元素的CSS中添加不透明度:0.2(或您希望的0到1之间的任何数字)即可。
实例
.myclass {
color: #eb4746;
opacity: 0.2;
}
这可以用于背景、标题、段落等。
不透明度的背景,但不是文本有一些想法。要么使用半透明图像,要么覆盖其他元素。