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

Posted 2023-03-06

【中文标题】使用 rgba() 仅在背景图像上设置不透明度

【英文标题】：Setting opacity on only background image with rgba()

【发布时间】：2017-03-21 14:01:00

【问题描述】：

我看过这篇文章，它清楚地描述了如何在不影响子元素的情况下仅设置父背景图像的不透明度：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');

但是背景不显示。

【问题讨论】：

根据浏览器要求，您可以在这篇文章中查看 Daniel 的答案：***.com/questions/10422949/css-background-opacity

你不能应用不透明度：0；给它的孩子？

@AllDani.com 我认为这可行，但在其子项上设置 opacity: 0 并没有影响。

发布你的尝试

@AllDani.com 我已经发布了我在问题中尝试过的内容。但是我通过将不透明背景图像设置为默认图像来解决它。

【参考方案1】：

在您的情况下，由于图像继续着色，因此看不到背景颜色，如果它不透明，则不会显示它。

目前没有一个属性可以只为背景图像分配透明度。

如果您想要一个没有任何效果或悬停过渡的透明背景图像，您可以直接使用 .png 格式的图像将其保存为透明度。

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

【讨论】：

你能详细说明你的最后一段吗？没有真正关注你。

【参考方案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;