html - 如何仅在背景图像而不是内部文本上应用 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

与 Vitorino Fernandes' answer 略有不同的方法将在文本和背景之间“嵌套”一个伪元素:

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);
  }

<div>Hover to see effect</div>

---

因此，根据您的 fiddle ，添加:

.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