如何仅在背景图像上应用div不透明度而不在内部文本上应用div不透明度

Question

我正在尝试应用一个简单的css3动画，并在文本跳转时对背景图像应用不透明度，但它会影响整个div。

Here is the jsfiddle link

这是主要的包装div：

.movie_thumb_wrapper {
    float: left;
    line-height: 31px;
    background-color: #424755;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    height: 140px;
    width: 220px;
    background-size: 220px 140px;
    background-repeat: no-repeat;
       background-color:#1a1c26;
}

Answer 1

简短的回答，你不能。你需要使用CSS位置绝对和z-index来创建图层，因此文本位于半透明层的“顶部”。 （而不是“将其作为子元素”）

Answer 2

与Vitorino Fernandes' answer略有不同的方法是“嵌套”＃39;文本和背景之间的伪元素：

＆＃13;

＆＃13;

div {
  position: relative;
  height: 300px;
  width: 300px;
  display: inline-block;
  color:white;
}
div:before,
div:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition:all 0.8s;
}
div:before {
  background: rgba(0, 0, 0, 0); /*this changes on hover - you might just want to change it here to get rid of the hover altogether*/
  z-index: -1;
}
div:after {
  z-index: -2;
  background: url(http://placekitten.com/g/300/300);
}
div:hover:before{
  background: rgba(0, 0, 0, 0.6);
  }

＆＃13;

<div>Hover to see effect</div>

＆＃13;

＆＃13;

＆＃13;

---

所以，就你的小提琴而言，添加：

.movie_thumb_wrapper{
  position:relative;
}
.movie_thumb_wrapper:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition:all 0.8s;
    background:rgba(0,0,0,0.6);
    z-index:-2;
}

jsfiddle example

Answer 3

您可以使用pseudo元素:after

＆＃13;

＆＃13;

div {
  width: 200px;
  position: relative;
  border-radius: 5px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  opacity: .7;
  right: 0;
  bottom: 0;
  z-index: -1; /* so that it goes in the backward */
  background: url('http://placeimg.com/200/480/any')
}

＆＃13;

<div>
  <h1>Check my background image</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

而不是十六进制颜色代码指定rgba并根据需要调整

background-color:rgba(255,0,0,0.5);

reference

Answer 5

嗯，

background: rgba(0, 0, 0, 0.75); 

完成这项工作！