使用 CSS 使背景图像透明答案

【问题标题】：Make a background image transparent using CSS使用 CSS 使背景图像透明
【发布时间】：2016-03-19 02:01:47
【问题描述】：

我有一个场景，我需要一个透明的背景图像，但我无法控制我使用的动态生成的图像。出于这个原因，透明PNG是不可能的。不应影响同一 div 中的所有子元素，并且应完全可见。

我知道如何将透明度应用到背景颜色和块级元素，但你可以为背景图像执行此操作吗？

【问题讨论】：

您必须使用<img> 并申请opacity。这是唯一的方法。
除了使用 z-index 对 div 进行分层之外，还有什么解决方法吗？
能否在现有背景上放置一张半透明的白色或黑色图像？

标签： css transparency background-image

【解决方案1】：

使用背景设置元素的不透明度是一个好的开始，但是您会看到其中不透明度发生更改的任何元素也将是透明的。

解决方法是让一个包含背景且透明的元素 (opacity:0.6; filter:alpha(opacity=60))，然后将容器与实际内容一起浮动或定位。

以下是这种方法的工作原理示例：

#container {
    width: 200px;
    postiion: relative;
  }
  
  #semitrans {
    width: 100%; height: 100px;
    background: #f00;
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  
  #hello {
    width: 100%; height: 100px;
    position: absolute;
    top: 20px; left: 20px;
  }

<div id="container">
    <div id="semitrans"></div>
    <p id="hello">Hello World</p>
</div>

【讨论】：

【解决方案2】：

没有。不是技术上的。您必须应用背景颜色才能使其正常工作，因为您会褪色颜色和图像，而不仅仅是图像。请记住，背景图片不是可设置样式的内容。

您可能可以通过使用图像而不是背景图像来破解它，并且混合了相对和绝对定位以及顶部的一些 z 索引。但这是我能想到的唯一方法！

【讨论】：

图片不是总是放在图片下面吗？

【解决方案3】：

IE 使用filter:alpha(opacity=50); 而其他人使用opacity:.5
只需将它们都包括在内。

【讨论】：

这将淡出元素中的所有内容，而不仅仅是背景图像。我建议在不透明度上使用 rgba，因为您可以单独设置单个元素的透明度。但即使这样也不适用于背景图像