css - 使用 CSS 使背景图像透明

Question

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

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

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>