CSS背景透明度

870

孩子们继承不透明。如果他们不这样做会很奇怪和不方便。

您可以为背景图像使用半透明png，或者为背景颜色使用RGBa（a为alpha）颜色。

实施例，50％褪黑背景：

<div style="background-color:rgba(0, 0, 0, 0.5);"> 
 
    <div> 
 
     Text added. 
 
    </div> 
 
</div>

来源

2012-05-02 23:07:20 AlienWebguy

+9

更深入的教程可以在这里找到：http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and -filters/ –

+8

可以通过单独的css规则设置alpha吗？ – jayarjo

+3

不，它是颜色值的单个通道，颜色值分配给CSS规则。 – AlienWebguy

3

这是因为内div有其具有40％的不透明度它嵌套在（在div的不透明度为100％）。

为了规避它，你可以做一些事情。

，你可以创建两个单独的div像这样：

<div id="background"></div> 
<div id="bContent"></div>

设置所需的CSS不透明度和其他属性兴田背景，并利用Z-index属性（z-index），以风格和bContent DIV位置。有了这个，你可以将div背景div放在不透明的地方。

另一种选择是RGBa。这将允许你嵌套你的div，并仍然实现div特定的不透明度。

的最后一个选项是简单地让你选择你想要的图像编辑想要的颜色的半透明的PNG图片，背景图像属性设置为图片的URL，然后你赢了”不必担心与css混淆并且失去嵌套div结构的功能和组织。

来源

2012-05-02 23:14:06 zillaofthegods

20

我会做这样的事情

<div class="container"> 
    <div class="text"> 
    <p>text yay!</p> 
    </div> 
</div>

CSS：

.container { 
    position: relative; 
} 

.container::before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: url('/path/to/image.png'); 
    opacity: .4; 
    content: ""; 
    z-index: -1; 
}

应该工作。这假设你需要有一个半透明的图像btw，而不是一个颜色（你应该只使用rgba）。还假设你不能只是预先在Photoshop中改变图像的不透明度。

来源

2012-05-02 23:28:58

+0

你必须在#bgd上设置z-index：-1吗？否则它会使整个事物透明 – windmaomao

+0

而不是'z-index'，但'bgd' div元素需要位于'text'元素之前 –

115

您可以使用CSS 3 :before具有半透明背景，并且只需一个容器即可完成此操作。使用这样的事情

<article> 
    Text. 
</article>

然后申请一些CSS

article { 
    position: relative; 
    z-index: 1; 
} 

article::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: .4; 
    z-index: -1; 
    background: url(path/to/your/image); 
}

样品：http://codepen.io/anon/pen/avdsi

注意：您可能需要调整z-index值。

来源

2013-09-24 15:26:58 daniels

+0

实际上它可以在所有新浏览器和IE 9及更高版本中运行。看看这里[示例]（http://codepen.io/anon/pen/alfLj） – daniels

+7

我比rgba更喜欢这个解决方案，因为它适用于图像和背景颜色。 – BillyTom

+4

接受的答案是正确的，但这个创造性的解决方案更直接地回答了OP。编辑你的背景图像是一个半透明的PNG/GIF /等..更加正确。不透明度需要更多汁才能渲染。 – Patrick

37

下面的方法可以用来解决您的问题

CSS APLHA透明度的方法（在IE 8不工作）
```
#div{background-color:rgba(255,0,0,0.5);} 
```
使用根据透明的PNG图片您选择作为背景。

使用下面的CSS代码片段来创建一个跨浏览器的透明背景。这里是#000000 @ 0.4％的不透明度

.div { 
    background:rgb(0,0,0); 
    background: transparent\9; 
    background:rgba(0,0,0,0.4); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
    zoom: 1; 
}  
.div:nth-child(n) { 
    filter: none; 
}

有关该技术的更多详细信息，请参阅this，其中有一个在线的CSS生成的例子。

来源

2013-09-24 16:06:32

+1

我认为它是正确的解决方案，浏览器解决方案而不仅仅是新的浏览器。谢谢！ – Nashe

+0

css标签被称为'background-color'而不是'background' – Wilt

+3

@Width css规则background-color是背景的子规则。与边框，边距和填充类似，所有背景细分都可以在背景中设置在一行中，而不是单独设置。在这个实例中使用背景是你想要的，所以你可以覆盖其他背景子规则。 –

4

.transbg{/* Fallback for web browsers that don't support RGBa */ 
background-color: rgb(0, 0, 0); 
/* RGBa with 0.6 opacity */ 
background-color: rgba(0, 0, 0, 0.6); 
/* For IE 5.5 - 7*/ 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
/* For IE 8*/ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

来源

2014-03-16 06:08:45

4

您可以使用SASS transparentize，我发现它是最有用和最简单的使用。

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4) 
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

来源

2016-03-21 12:53:40

2

只要确保把宽度和高度的前景与背景相同，或尝试有上，下，左，右属性。

<style> 
    .foreground, .background { 
     position: absolute; 
    } 
    .foreground { 
     z-index: 1; 
    } 
    .background { 
     background-image: url(your/image/here.jpg); 
     opacity: 0.4; 
    } 
</style> 

<div class="foreground"></div> 
<div class="background"></div>

来源

2016-07-25 23:57:22

CSS背景透明度

回答

相关问题