CSS背景透明度

Question

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

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

我期望这会使背景的透明度为0.4，并且文本的透明度为100%。相反，它们两个的透明度都是0.4。

- John Wheal

---

这是我的解决方案：<div style="background-image: url(...);"><div style="background-color: rgba(255, 255, 255, 0.7);">文字</div></div>。 - Beamer

很遗憾，对于背景图像来说，没有background-opacity属性。我遇到了一个响应式的情况，在较小的设备上，背景需要更加细微和透明，以便在文本下面滑动。可能我需要改变HTML结构，并为背景单独创建一个专用的div，就是因为这个原因。有趣的是，**background-blend-mode**属性存在，但却没有透明度的类似属性（你更有可能想要改变透明度，并且在改变混合模式时进行微调）。 - Mentalist

Answer 1

孩子们继承了不透明度。如果他们没有这种特性，那将是奇怪和不方便的。

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

例如，50％淡化的黑色背景：

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

- AlienWebguy

---

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

可以通过单独的 CSS 规则来设置透明度吗？ - jayarjo

不，这是颜色值的单通道，颜色值被分配给 CSS 规则。 - AlienWebguy

@jayarjo 的意思是 rgba(255,255,255,0.6) 相当于背景色的中性淡出。 - LateralFractal

说“孩子继承不透明度”并不完全正确，他们并没有继承。只是如果孩子被包含在不透明的父元素中，孩子的不透明度将为1，但是父元素应用其不透明度到自身及其所有子元素。 - stephband

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

- daniels

---

我更喜欢这种解决方案，因为它适用于图像和背景颜色。相比之下，使用rgba解决方案就做不到这一点。 - BillyTom

被接受的答案是正确的，但这个有创意的解决方案更直接地回答了问题提出者的问题。将您的背景图像编辑为半透明的 PNG/GIF/等等……更加正确。不透明度需要更多的计算资源来呈现。 - Patrick Borkowicz

楼主想要将不透明度应用于背景图片。 - daniels

这个可以工作，但是如果你想通过javascript更改伪元素的背景颜色 - 你将无法做到，因为它是阴影DOM的一部分。 - Adam Cooper

如果像我一样，容器:before 先前已设置为其他显示选项，则 :before 规则还需要 display:block;（它是我网站大部分通用布局，但我已将其作为特定页面的样式块放置）。 Translated text: 若像我一樣，容器:before 先前已設定為其他顯示選項，則 :before 規則還需要 display:block;（它是我網站大部分通用佈局，但我已將其作為特定頁面的樣式區塊放置）。 - CodingInTheUK

Answer 3

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

1. CSS alpha透明度方法（在Internet Explorer 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;
}

有关此技术的更多详细信息，请参见此处，该页面具有在线CSS生成器。

- Achyuth Ajoy

---

CSS标签名为background-color而不是background。 - Wilt

@Wilt CSS规则中的背景颜色（background-color）是背景（background）的子规则。类似于边框（border）、外边距（margin）和内边距（padding），所有背景子规则都可以在一行内设置到背景中，而不是分别设置。但在这种情况下，你想要使用背景（background），以便你可以覆盖其他背景子规则。 - David R.

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

应该可以工作。这是在假设您需要半透明图像而不是颜色（您应该使用rgba）的情况下进行的。同时还假设您无法预先在Photoshop中更改图像的不透明度。

- Pete Lada

---

你必须在 #bgd 上设置 z-index: -1 吗？否则整个东西会变成透明的。 - windmaomao

不是 z-index，而是 bgd div 元素需要在 text 元素前面。 - T.Todua

在::before伪元素上使用pointer-events: none;而不是z-index: -1将允许鼠标穿过伪元素单击实际元素，同时仍然显示伪元素在顶部。 - OXiGEN

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

- ilan weissberg

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

- Wael Wafik

Answer 7

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

为了规避此问题，您可以采取以下几种方法。

您可以创建两个单独的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结构的功能和组织。

- jshbrmn

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>

- Niño Angelo Orlanes Lapura

---

专用的带有不透明度控制器的背景元素似乎是最好的选择。不过，如果有一个真正的背景不透明度规则会更好。 - Llama D'Attore