如何为背景图像添加透明度？（HTML + CSS）[重复]答案

【问题标题】：How to add transparency to a background image? (HTML + CSS) [duplicate]如何为背景图像添加透明度？（HTML + CSS）[重复]
【发布时间】：2020-09-13 21:44:58
【问题描述】：

我的 CSS 文件中有这些行：

body {
    background: url(https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg);
}

如何使用透明度影响此图像？我找到了一个看起来像这样的“解决方案”：

img {
    opacity: 0.5
}

但我真的不知道如何应用它。如果我只是把它写下来，什么都不会发生，因为我不知道如何将它连接到我想要使用的图像。

【问题讨论】：

img 规则将应用于img 标记。你有你的图片作为背景，所以你可能需要stackoverflow.com/questions/12605908/…

标签： html css tags transparency

【解决方案1】：

您可以利用background 属性的rgba() 函数并将其与url() 函数结合使用。 RGBA 除了 Red-Green-Blue 之外，还有表示“Alpha”的 A，其性能与 opacity 属性一样；值范围从 0 到 1。在背景图像中使用 RGBA 的技巧是在 linear-gradient() 中使用两个并行的 rgba() 函数。由于rgba() 返回一个颜色值，它可以用作线性渐变中的两个色标……尽管它们在技术上不是色标，因为从两个相似的颜色值不会发生过渡。骇人听闻，但简单实用。

body { 
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
                url('https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg')
}

【讨论】：

【解决方案2】：

您只需按如下所示应用它；

body:before { 
  content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-image: url('https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg');
   opacity: 0.5;
}

.content {
    position: relative; 
    z-index: 2;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <h1 class="content">Hey!</h1>
  </body>
</html>

正文是您的背景，内容是您的文本和其他内容等。

【讨论】：