使用CSS使背景图像透明
我有一个场景，我需要一个透明的背景图像，但我无法控制我使用的动态生成的图像。 出于这个原因，透明PNG不存在问题。 同一个div内的所有子元素都不应该被影响，并且应该完全可见。
我知道如何将透明度应用于背景颜色和块级元素，但是您可以为背景图像执行此操作吗？
使用背景设置元素的不透明度是一个好的开始，但是您会发现不透明度被更改的元素也是透明的。
解决方法是使用包含背景且透明的元素（ 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>不是。从技术上说。 您必须应用背景颜色才能使其发挥作用，因为您会淡化颜色和图像，而不仅仅是图像。 请记住，背景图片不是风格化的内容。
你可能通过使用图像而不是背景图像来破解它，并且在顶部有一些相对和绝对定位以及一些z-indexing的混合。 但这是我能想到的唯一方法！
IE使用filter:alpha(opacity=50); 而另一些则使用opacity:.5
包括他们两个。