Question

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

我搜索过多＆amp;我找不到解决这个问题的好答案！

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

Answer 1

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

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

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

2。使用定位。

如果使父元素具有相对定位并将子元素绝对定位在内部，则将它们从流中取出，它们不会受到父元素的不透明度的影响。 [Source]

3。在同一位置使用兄弟元素

如果您将内容与父级分开并使两个元素成为兄弟姐妹，则可以使用z-indexing将父级元素放在父级上，并设置父级的不透明度而不影响子级。

还有更多，但其中一个应该能得到你想要的东西。

Answer 2

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

Answer 3

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

检查完成情况 http://css-tricks.com/snippets/css/transparent-background-images/

Answer 4

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

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

如何在不更改div内容的情况下更改背景图像的不透明度？

4 个答案:

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

2。使用定位。

3。在同一位置使用兄弟元素