使用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>