使用媒体查询在背景图像上设置不透明度

Question

我有几个div，每个div都有背景图片。 我使用的是自适应CSS，当我的div的宽度小于特定大小（760px btw）时，文本和某些带有样式的表格将变得难以阅读/看到，而背景图像则在它们后面移动（背景图片位于文字/表格的最右边，如果宽度大于 760px ...，则不会太明显。 因此，当视口的宽度小于等于760px时，我只希望背景图像具有不透明度...

我怎么做？

所以我的CSS像这样开始：

@media screen and (max-width: 760px){
   background: #cdcdcd url("/images/back.jpg") no-repeat top right;
    /*How do I set the opacity of only the background?*/
} 

Answer 1

您不能更改背景图像的不透明度，除非将其移动到单独的容器中。

您只能使用rgba()改变BG颜色的不透明度：

background: rgba(0, 0, 0, .5);

Answer 2

您不能只为背景设置不透明度，而是为整个元素设置不透明度。 您可以设置背景色的不透明度（有关示例，请参见Zoltan的回答 ）。

---

您可以在图像上设置白色<div>并更改其不透明度。

<div class="yourImage">
    <div class="imageCover"></div>
</div>

.yourImage {
  background: url(http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png);
  width: 300px;
  height: 83px;
}
.imageCover {
  background: #fff;
  width: 300px;
  height: 83px;
  opacity: .5;
}

现场演示： Tinkerbin

但是，如果您没有干净的背景隐藏图像，则此方法将无效。