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

Question

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

这是jsfiddle链接

这是主要的包装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的回答稍有不同的方法是“嵌套”文本和背景之间的伪元素：

 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> 

---

因此，就您的小提琴而言，添加：

.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示例

Answer 3

您可以使用pseudo元素:after

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

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

Answer 4

代替十六进制颜色代码，指定rgba并根据需要进行调整

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

参考

Answer 5

嗯，

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

做这份工作！