我想创建一个带有背景图像和文本的正方形，并操纵背景图像的不透明度。
问题是当我应用不透明度值时，它也会更改文本。我尝试在正方形内放置两个部分，我还尝试更改背景图像的不透明度，然后将文本的不透明度设置回 1 但这并没有不工作。
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;
}
最佳答案
使用以下 CSS 将有助于解决您的问题:
将图像网址提供给之后或之前部分。并给予不透明度。所以，它不会影响文本。
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;}<body>
<section>
<p>TEST</p>
</section>
</body>检查Fiddle.
关于html - [HTML][CSS] 如何更改背景图像的不透明度而不更改其上的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29553390/