[HTML][CSS] 如何改变背景图片的不透明度，而不是上面的文字？
Posted
技术标签:
【中文标题】[HTML][CSS] 如何改变背景图片的不透明度，而不是上面的文字？【英文标题】：[HTML][CSS] How to change opacity of background-image but not the text on it? 【发布时间】：2015-06-15 16:44:57 【问题描述】：我想创建一个带有背景图像和文本的正方形，并控制背景图像的不透明度。
问题是当我应用opacity 值时，它也会更改文本。我尝试在正方形内放置两个部分，我还尝试更改背景图像的不透明度，然后将文本的opacity 设置回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;
【问题讨论】：
【参考方案1】：使用以下 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;<body>
<section>
<p>TEST</p>
</section>
</body>查看Fiddle.
【讨论】：
【参考方案2】：试试这样：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
【讨论】：
以上是关于[HTML][CSS] 如何改变背景图片的不透明度，而不是上面的文字？的主要内容，如果未能解决你的问题，请参考以下文章