CSS 如何在不更改 div 内容的情况下更改背景图像的不透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23254346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i change background image opacity without changing on div content?
提问by hadivoice
I want know that "How can i change background image opacity without changing on div content?"
我想知道“如何在不更改 div 内容的情况下更改背景图像的不透明度？”
I searched too much & I don't find a good answer to solve this issue!
我搜索了太多，但没有找到解决这个问题的好答案！
HTML
HTML
<div class="div-1">
<h2>title</h2>
<p>text</p></div>
CSS
CSS
.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}
采纳答案by David
Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:
由于元素的所有子元素都受其 CSS 影响，因此您不能简单地设置背景图像的不透明度，但是，有几种解决方法：
1. Use transparent background images (easiest imo)
1.使用透明背景图片（最简单的imo）
Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!)and save it as an image with transparency (like PNG).
而不是事后设置背景图像的不透明度，只需在您最喜欢的图像编辑器中使背景图像透明（尝试 gimp，它是免费的！）并将其保存为具有透明度的图像（如 PNG）。
2. Use positioning.
2.使用定位。
If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]
如果你让父元素有相对定位，子元素绝对定位在里面，你把它们从流中取出，它们不会受到父元素不透明度的影响。[来源]
3. Use sibling elements in the same position
3. 使用相同位置的兄弟元素
If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.
如果将内容与父元素分开并使两个元素成为兄弟元素，则可以使用 z-indexing 将子元素定位在父元素上，并设置父元素的不透明度而不影响子元素。
There are more, but one of those should get you what you want.
还有更多，但其中之一应该可以满足您的需求。
回答by Imran Bughio
You can use after or before pseudo element for background-image.
您可以在背景图像的伪元素之后或之前使用。
Css:
css：
.has-bg-img{
position: relative;
}
.has-bg-img:after {
content:'';
background: url('http://placehold.it/500x100') no-repeat center center;
position: absolute;
top:0px;
left: 0px;
width:100%;
height:100%;
z-index:-1;
opacity: 0.2; /* Here is your opacity */
}
回答by patas1818
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
没有 CSS 属性 background-opacity，但是您可以通过插入一个具有常规不透明度的伪元素来伪造它，它与后面元素的确切大小相同。
check how is done http://css-tricks.com/snippets/css/transparent-background-images/
检查如何完成 http://css-tricks.com/snippets/css/transparent-background-images/
回答by Md. Rahman
You can try this.....
你可以试试这个......
<div style="position:relative; ">
<div style=" background-image:url(url); opacity:0.5;filter:alpha(opacity=40);height:520px; width:520px;"></div>
<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px;idth:500px;">
Your Div Contents are Here..................
</div>
</div>
