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

Question

我想知道"如何在不改变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;}

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

Answer 2

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

1.使用透明背景图像(最简单的imo)

不要在事后设置背景图像的不透明度,只需在您喜欢的图像编辑器中使背景图像透明(尝试gimp,它是免费的!)并将其保存为具有透明度的图像(如PNG).

2.使用定位.

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

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

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

还有更多,但其中一个应该得到你想要的.

Answer 3

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

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