如何在不更改 div 内容的情况下更改背景图像不透明度？ [复制]答案

【问题标题】：How can I change a background image opacity without changing on div content? [duplicate]如何在不更改 div 内容的情况下更改背景图像不透明度？ [复制]
【发布时间】：2014-06-08 21:06:12
【问题描述】：

我想知道“如何在不更改 div 内容的情况下更改背景图像不透明度？”

我搜索了太多，我没有找到解决这个问题的好答案！

HTML

<div class="div-1">
    <h2>title</h2>
    <p>text</p></div>

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;}

【问题讨论】：

您可以向我们展示您的代码或创建jsfiddle.net 以便我们更好地了解您想要什么

标签： css opacity

【解决方案1】：

DEMO

您可以在背景图像的伪元素之后或之前使用。

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 */
}

【讨论】：

【解决方案2】：

因为一个元素的所有子元素都受其 CSS 影响，所以您不能简单地设置背景图像的不透明度，但是，有几种解决方法：

1。使用透明背景图片（最简单的 imo）

与其事后设置背景图片的不透明度，只需在您最喜欢的图片编辑器(try gimp, it's free!) 中将背景图片设为透明，然后将其保存为具有透明度的图片（如PNG）即可。

2。使用定位。

如果你让父元素有相对定位，而子元素在里面绝对定位，你把它们从流中拿出来，它们就不会受到父元素不透明度的影响。 [Source]

3。在同一位置使用同级元素

如果您将内容与父元素分开并使两个元素成为兄弟元素，则可以使用 z 索引将子元素定位在父元素之上，并设置父元素的不透明度而不影响子元素。

还有更多，但其中之一应该可以满足您的需求。

【讨论】：

第一个答案有效
@hadivoice 很高兴我能帮上忙。
我喜欢 #3 的位置：第二兄弟的相对和负顶部。

【解决方案3】：

你可以试试这个.....

 <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>

【讨论】：

我不会内联输入。

【解决方案4】：

没有 CSS 属性 background-opacity，但您可以通过插入一个具有常规不透明度的伪元素来伪造它，使其与后面元素的确切大小相同。

检查是如何完成的 http://css-tricks.com/snippets/css/transparent-background-images/

【讨论】：