我使用的代码类似于以下代码:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
我希望这样可以使背景的不透明度为0.4,文本的不透明度达到100%。相反,它们都具有0.4的不透明度。
我使用的代码类似于以下代码:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
我希望这样可以使背景的不透明度为0.4,文本的不透明度达到100%。相反,它们都具有0.4的不透明度。
当前回答
.transbg{/* 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)";}
其他回答
只需确保前景的宽度和高度与背景相同,或者尝试使用顶部、底部、左侧和右侧的财产。
<style>
.foreground, .background {
position: absolute;
}
.foreground {
z-index: 1;
}
.background {
background-image: url(your/image/here.jpg);
opacity: 0.4;
}
</style>
<div class="foreground"></div>
<div class="background"></div>
您可以使用Sass的transparentize。
我发现它是最有用、最容易使用的。
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
查看更多:#transparentize($color,$amount)⇒ Sass::脚本::值::颜色
以下方法可用于解决您的问题:
CSS alpha透明度方法(在Internet Explorer 8中不起作用):#div{背景色:rgba(255,0,0.5);}根据您的选择使用透明的PNG图像作为背景。使用以下CSS代码片段创建一个跨浏览器的alpha透明背景。下面是一个#000000@0.4%不透明度的示例.div文件{背景:rgb(0,0,0);背景:透明\9;背景:rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);缩放:1;}.div:第n个子级(n){过滤器:无;}
有关此技术的更多详细信息,请参阅这个,它有一个在线CSS生成器。
我会这样做
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
它应该会起作用。这是假设你需要有一个半透明的图像BTW,而不是一个颜色(你应该只使用rgba)。还假设你不能在Photoshop中预先改变图像的不透明度。
.transbg{/* 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)";}