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

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

Answer 3

没有。不是技术上的。您必须应用背景颜色才能使其生效，因为您将淡化颜色和图像，而不仅仅是图像。请记住，背景图像不是可设置样式的内容。

你可能通过使用图像而不是背景图像来破解它，并且在顶部有一些z-indexing的相对和绝对定位的混合。但这是我能想到的唯一方式！

使用CSS使背景图像透明

3 个答案: