CSS背景图像不透明度影响其中的孩子

Question

我尝试在css中更改图像不透明度。但这影响了其中的所有孩子。我已经查看了许多stackoverflow问题和答案，但它仍然不适合我。因此，决定自己提问。

我的示例代码：

<div id="home" class="home">

<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px;  color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />

</div>

CSS：

#home {
  background: url(../images/home1.png) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*opacity: 0.5;*/
}

首先，我尝试更改div home的不透明度，但由于它也占用了文本，所以我决定使用GIMP手动更改图像不透明度。

我改变了它。即便如此，文本看起来并没有实际的颜色。所以我尝试通过做一些text-shadow和东西来让它发光。我似乎还没有得到实际的文字颜色。

Original Image

这是不改变不透明度的实际图片。

Image with changed opacity in GIMP

这是在GIMP中更改它的不透明度后的图像。

我希望图像具有这种不透明度，但是第一张图像的文本颜色。

希望我很清楚。我在这里上传了这些图片，但由于我没有足够的声誉，因此在上传到其他网站后不得不分享链接。

Answer 1

您可以使用伪元素添加background并向其添加opacity

html,
body {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#home {
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#home:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(http://placeimg.com/640/480/any) no-repeat center center fixed;
  background-size:100% auto;
  opacity: 0.5;
}

<div id="home" class="home">

  <h2 style="margin-top:130px; text-shadow: #222 0 0 10px;  color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2>

  <br />
</div>

Answer 2

我所知道的唯一方法（到目前为止）是使用rgba（）作为背景颜色;这不会影响其子女（div或元素）。

示例：

rgba(0,0,0,0.5)

Answer 3

在div中使用 div来提供背景，并使该div只有不透明度：

使用背景尺寸：封面;让图像完全覆盖。它将遵守div.background的sie。所以你需要将div.background设置为宽度和高度100％。

http://jsfiddle.net/Preben/0mgrt069/13/

<div id="home" class="home">
  <div class="background"></div>
  <h2>Find the suitable tutor you are looking for..</h2>
</div>

和CSS：

 h2 {
    margin-top:130px; 
    text-shadow: #fff 0 0 10px;  
    color:black; 
    font-weight:bold; 
    font-family: 'Gloria Hallelujah', cursive;
    }
.background{
    background:url(http://lorempixel.com/400/300/nature/);
    background-size:cover;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .4;
    width: 100%;
    height: 100%;
}

Answer 4

我以某种方式解决了它。我做的是我添加了另一个div overlay_home 并在css中更改了它的rgba。这使得图像只会在没有文字的情况下改变它的不透明度。

<div id="home" class="home">

<div id="overlay_home"></div>

<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px;  color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />

</div>

#home {
  background: url(../images/home1.png) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*opacity: 0.5;*/
}

#overlay_home{

height:100%;
width: 100%;
position: absolute;
background-color: rgba(0,0,0,0.5)


}