我想创建一个带有背景图片和文字的正方形,并操纵背景图片的不透明度。
问题是当我应用opacity
值时,它也会更改文本。我试图在广场内放置两个部分,我还尝试更改背景图像的不透明度,然后将文本的opacity
设置回1
,但这不起作用。< / p>
HTML:
<section>
<p>TEST</p>
</section>
CSS:
section {
height: 200px;
width: 300px;
background-image: url(Graphic/background.jpg);
opacity: 0.5;
}
section p {
color: white;
opacity: 1;
}
答案 0 :(得分:3)
使用以下CSS将有助于解决您的问题:
将图片网址提供给after
或before
部分。并赋予其不透明性。因此,它不会对文本产生影响。
section {
width: 200px;
height: 200px;
display: block;
position: relative;}
section:after{
content: "";
background: url(http://video-js.zencoder.com/oceans-clip.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
}
section p {
opacity: 1;}
&#13;
<body>
<section>
<p>TEST</p>
</section>
</body>
&#13;
检查Fiddle.
答案 1 :(得分:1)
请尝试以下操作: Demo
CSS:
section {
height: 200px;
width: 300px;
}
section p {
color: white;
position:relative;
}
section:before {
content:url(http://www.freeimages.com/assets/182929/1829283516/blue-sunset-1446196-m.jpg);
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
position: absolute;
z-index: -1;
}
在此更新的 demo
中获得更多不透明度