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 设置为 width 和 height 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)


}