CSS背景不透明度

我正在使用类似于下面的代码的东西：

<div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> Text </div> </div> 

我预计这将使背景具有0.4的不透明度并且文本具有100％的不透明度。 相反，它们的透明度都是0.4。

Answer 1

儿童inheritance不透明。 如果他们不这样做会很奇怪，不方便。

您可以使用半透明的PNG为您的背景图像，或者使用RGBa（阿尔法）颜色为您的背景颜色。

例如，50％褪色的黑色背景：

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

Answer 2

你可以使用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值。

Answer 3

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

1. CSS Aplha透明度方法（在IE 8中不起作用）

    #div{background-color:rgba(255,0,0,0.5);} 

2. 使用一个透明的PNG图像根据您的select作为背景。

3. 使用下面的CSS代码片段来创build一个跨浏览器的透明背景。 这是#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; } 

有关这种技术的更多细节，请参阅这个 ，它有一个在线的CSS生成器。

Answer 4

我会做这样的事情

 <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; } 

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

Answer 5

 .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)";} 

Answer 6

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

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

你可以像这样创build两个独立的div：

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

设置你想要的CSS不透明度和其他属性为背景，并利用z-index属性（ z-index ）来设置和定位bContent div。 有了这个，你可以把div div放在背景div上，而不用把它遮住。

---

另一个select是RGBa 。 这将允许您嵌套您的div，仍然实现div特定的不透明度。

---

最后一个select是在你想要的图像编辑器中简单地制作一个你想要的颜色的半透明.png图像，将background-image属性设置为图像的url，然后你不必担心与CSS和失去了嵌套的div结构的能力和组织。

Answer 7

你可以使用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) 

查看更多： http : //sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

Answer 8

只要确保前景的宽度和高度与背景相同，或尝试具有顶部，底部，左侧和右侧属性。

 <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>