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

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 格式的图像将其保存为透明度。

否则，您将需要在“位置：相对”和“溢出：隐藏”中创建一个包含内部图像的容器，并在“位置：绝对”中创建另一个容器，其中包含文本或其他内容。通过这种方式，您可以只为图像分配透明度，而不会影响其余部分。

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;   
}