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

Question

我已经尝试更改 css 中的图像不透明度。但这会影响其中的所有 children 。我看过许多 Whosebug 问题和答案，但它仍然不适合我。因此，决定自己问一个问题。

我的示例代码：

<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

我知道的唯一方法（到目前为止）是使用 rgba() 作为您的 background-color；这不会影响其 children（div 或元素）。

示例：

rgba(0,0,0,0.5)

Answer 2

您可以使用伪元素添加 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 3

在div中使用div作为背景，并使div只有不透明度：

使用background-size:覆盖；让图像完全覆盖。它将遵循 div.background 的规则。所以你需要将 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)


}

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

CSS Background image opacity affecting the children within it

html

css

image

opacity