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

否则，您需要在“position: relative”和“overflow: hidden”中创建一个带有内部图像的容器，在“position: absolute”中创建另一个带有文本或其他内容的容器。通过这种方式，您可以仅将透明度分配给图像而不影响其余部分。