Question

我看过这篇文章，清楚地描述了如何在不影响子元素的情况下仅设置父背景图像的不透明度：HTML/CSS text background transparent but text not

但是，如何设置背景图像和不透明度？最初，我使用了这样的不透明度（但儿童元素也受到了影响）：

.content {
    background-image: url('link/url/image.jpeg');
    opacity: 0.35;
}

但在查看上面链接的SO帖子后，我尝试了这个：

.content {
    background-image: url('link/url/image.jpeg');
    background: rgba(255, 255, 255, 0.35);
}

但似乎背景rgba（）值并没有做任何事情。我也试过了：

.content {
    background: rgba(255, 255, 255, 0.35) url('link/url/image.jpeg');
}

但是后台没有显示出来。

Answer 1

在您的情况下，无法看到背景颜色，因为图像会变为彩色，如果图像不透明，则无法显示。

目前没有可以为背景图像指定透明度的属性。

如果您想要一个透明的背景图像而没有任何影响或悬停过渡，您可以直接使用.png格式的图像，以透明的方式保存它。

否则，您需要在“position：relative”和“overflow：hidden”中创建一个容器，内部图像和另一个容器位于“position：absolute”中，文本或其他内部。通过这种方式，您只能为图像指定透明度，而不会影响其余部分。

Answer 2

试试这个：

.content::after {
  content: "";
  background: url('link/url/image.jpeg');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

使用rgba（）仅在背景图像上设置不透明度

2 个答案: