使用CSS创建背景图像透明

我有一个场景，我需要一个透明的背景图像，但我无法控制动态生成的图像。出于这个原因，透明PNG不存在问题。同一个div内的所有子元素都不应该被影响，并且应该完全可见。使用CSS创建背景图像透明

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

来源

2011-04-12 Andrew

你必须使用''和应用'opacity'。这是唯一的方法。 – thirtydot 2011-04-12 13:48:02

任何解决div分层使用z-index的问题？ – Andrew 2011-04-12 13:49:06

您可以在现有背景上放置半透明的白色或黑色图像吗？ – Sam 2011-04-12 13:50:09

使用背景设置元素的不透明度是一个好的开始，但您会发现不透明度被更改的元素也是透明的。

解决方法是使用包含背景且透明的元素（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>

来源

2011-04-12 13:47:49 derekerdmann

IE使用filter:alpha(opacity=50);而其他人使用opacity:.5
就包括他们俩。

来源

2011-04-12 13:43:10 Sam

这不适用于这种背景图像 – Andrew 2011-04-12 13:48:07

这将淡化一个元素中的所有元素，而不仅仅是背景图像。我建议在不透明度上使用rgba，因为您可以单独设置单个元素的透明度。但即使是这样，只是背景图片无法工作 – Alex 2011-04-12 13:50:13

不，技术上不。您必须应用背景颜色才能使其发挥作用，因为您会淡化颜色和图像，而不仅仅是图像。请记住，背景图片不是风格化的内容。

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

来源

2011-04-12 13:45:39 Alex

图像总是不会放在图像下方？ – Andrew 2011-04-12 13:46:56

使用CSS创建背景图像透明

回答

相关问题