[HTML] [CSS]如何更改背景图片的不透明度，但不更改其上的文字？
[英][HTML][CSS] How to change opacity of background-image but not the text on it?
问题描述
I want to create a square with a background image and text on it and manipulate the background image's opacity. 
我想创建一个带有背景图像和文字的正方形，并操纵背景图像的不透明度。
The problem is when I am applying an opacity value, it also changes the text. 问题是当我应用opacity值时，它也会更改文本。 I tried to put two sections inside the square, I also tried to change the opacity of the background image and then set the opacity of the text back to 1 but that doesn't work. 我尝试将两个部分放置在正方形内，还尝试更改背景图像的opacity ，然后将文本的opacity设置回1但这不起作用。
HTML: HTML：
<section>
<p>TEST</p>
</section>
CSS: CSS：
section {
height: 200px;
width: 300px;
background-image: url(Graphic/background.jpg);
opacity: 0.5;
}
section p {
color: white;
opacity: 1;
}
2 个解决方案
解决方案1
3 已采纳 2015-04-10 04:35:19
Use following CSS will help to solve your issue: 使用以下CSS将有助于解决您的问题：
Give image url to section after or before . 给图片的URL部分after或before 。 and give opacity with that. 并为此增加透明度。 So, it will not effect to text. 因此，它不会影响文本。
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>
解决方案2
1 2015-04-10 04:36:05
CSS: 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.