使用媒體查詢在背景圖像上設置不透明度

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

但是，如果您沒有干凈的背景隱藏圖像，則此方法將無效。