CSS 背景不透明度 [重复]

Question

这个问题在这里已经有了答案：

如何使用 CSS 为文本或图像提供透明背景？ (31 个回答)

5年前关闭。

我正在使用类似于以下代码的内容：

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

我预计这会使背景的不透明度为 0.4，文本的不透明度为 100%。 相反，它们的不透明度均为 0.4。

Answer 1

孩子继承不透明度。 如果他们不这样做，那将是奇怪和不方便的。

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

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

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

Answer 2

您可以使用伪元素::before或::after来获得半透明背景，并且您只需使用一个容器即可完成此操作。 使用这样的东西：

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

Answer 3

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

1. CSS alpha 透明度方法（不适用于 Internet Explorer 8）：

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

2. 根据您的选择使用透明的 PNG 图像作为背景。

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

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

Answer 5

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

查看更多： #transparentize($color, $amount) ⇒ Sass::Script::Value::Color

Answer 6

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

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

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

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

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

为背景设置所需的 CSS 不透明度和其他属性，并使用 z-index 属性 ( z-index ) 设置 bContent div 的样式和位置。 有了这个，您可以将 div 置于背景 div 的顶部，而不会使其不透明。

---

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

---

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

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>