使用 CSS 使背景图像透明

Question

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

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

Answer 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>

Answer 2

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

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

Answer 3

IE 使用 filter:alpha(opacity=50); 而其他浏览器则使用 opacity:.5

只需将它们都包括在内即可。