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

Set opacity on background-image with media query

本文关键字：图像 不透明度 背景 设置 媒体 查询      更新时间：2023-09-26

我有几个div，每个div都有一个背景图像。我正在使用响应式和自适应 CSS，当我的div 宽度小于某个大小（760px 顺便说一句）时，文本和一些带有样式的表格变得难以阅读/查看，背景图像在它们后面移动（背景图像位于文本/表格的最右侧，如果宽度高于 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?*/
}

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

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

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

您不能只为背景设置不透明度，而是为整个元素设置不透明度。您可以设置背景颜色的不透明度（有关示例，请参阅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;
}

现场演示：修补箱

但是，如果您的图像后面没有干净的背景，这将不起作用。

相关文章：