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

时间:2012-08-16 18:12:37

标签: javascript css

我有几个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?*/
} 

2 个答案:

答案 0 :(得分:3)

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

你可以改变的是使用rgba()的BG颜色的不透明度:

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

答案 1 :(得分:1)

您不能仅为背景设置不透明度,而是为整个元素设置不透明度。您可以设置背景颜色的不透明度(示例请参阅Zoltan's answer)。


您可以在图像上设置白色<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


但是,如果您的图像背后没有干净的背景,则无法使用。