CSS背景不透明度

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

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

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

2655701 次浏览
小开
最佳答案

孩子们遗传了不透明。如果他们没有，那将是奇怪和不方便的。

您可以使用半透明的PNG文件作为背景图像，或者使用RGBa（a表示alpha）颜色作为背景颜色。

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

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

小开

这是因为内部div具有嵌套的div的100%的不透明度（具有40%的不透明度）。

为了规避它，你可以做几件事。

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

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

为背景设置所需的CSS不透明度和其他属性，并使用z-index属性（z指数）来设置bContent div的样式和位置。有了这个，你可以放置背景div的div覆盖面，而不会影响它的不透明度。

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

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

小开

我会做这样的事

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

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

小开

你可以使用伪元素#0或#1来获得半透明背景，你可以只用一个容器来做到这一点。使用像这样的东西：

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

示例：

body {background: red;}
article {position: relative;z-index: 1;}
article:before {content: " ";position: absolute;top: 0;left: 0;width: 100%;height: 100px;opacity: .4;z-index: -1;background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);}
<article>Text.</article>

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

小开

以下方法可用于解决您的问题：

  1. CSS alpha透明方法（在Internet Explorer 8中不起作用）：

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

  2. Use a transparent PNG image according to your choice as background.

  3. Use the following CSS code snippet to create a cross-browser alpha-transparent background. Here is an example with #000000 @ 0.4% opacity

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

For more details regarding this technique, see this, which has an online CSS generator.

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

您可以使用萨斯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)

查看更多：#透明化（$颜色，$金额）}Sass::Script::Value::C颜色

小开

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

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

提交答案