CSS不透明度只应用于背景颜色，而不是文本吗？

Question

我可以仅将opacity属性分配给div的background属性，而不是应用于其上的文本吗？

我已经尝试过：

background: #CCC;
opacity: 0.6;

但这并没有改变不透明度。

- Jay

---

要使用跨浏览器方法，请参见我之前给出的回答：https://dev59.com/42445IYBdhLWcg3wkLPU#4792173。它基本上是 rgba，但可以在任何地方运行。 - thirtydot

这个问题是在一月份提出的--https://dev59.com/93RB5IYBdhLWcg3wZWbi。 - slifty

这里有一个关于一月份的同样问题：https://dev59.com/am445IYBdhLWcg3wl7TW - danicotra

Answer 1

看起来你想使用透明背景，如果是这样的话，你可以尝试使用 rgba() 函数：

rgba(R, G, B, A)

R（红色）、G（绿色）和 B（蓝色）可以是整数或百分比，其中数字 255 对应于 100%。A（Alpha 通道）可以是介于 0 和 1 的数值或百分比，其中数字 1 对应于 100％（完全不透明）。

RGBa 示例

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

这是一个小的示例，展示了如何使用rgba。

截至2018年，实际上每个浏览器都支持rgba语法。

- user142162

---

@adam 你需要知道，这不会在IE中起作用。 - Hussein

当..为什么总是IE搅了好事？！ - Haikal Nashuha

在IE9及以上版本中它能够良好地运行；o) - Martin Overgaard

背景颜色：rgba(54, 25, 25, .5)；适用于Chrome、Mozilla和IE 10。 - nAkhmedov

在大多数情况下，使用rgba（）是有效的，但如果CSS中有一个“background-opacity：”属性会更好，因为当“background-color：”被动态设置（即在管理外观面板的输入设置函数中），该函数已编码仅使用RGB（），并且您不想在CSS中覆盖它，因为那样您的函数中的动态输入将无法正常工作。在这种情况下，唯一添加不透明度的方法是修改HTML。如果有一个“background-opacity”属性，就不需要修改HTML代码了... - Damian Green

Answer 2

这个最简单的方法是使用两个 div，一个带有背景，一个带有文本：

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

- Kostas

---

在 #text 类中，必须使用 "position: absolute;" 属性才能使效果生效。 - smile.al.d.way

但是这并不是一个好主意，因为如果我们有另一个绝对定位的 div，它的位置取决于 #container 的相对父元素，那么就会出现问题。 - Vel Murugan S

当您需要根据文本确定#block opac背景位置时会发生什么？例如：将鼠标悬停在推广块上会显示比推广块一半大小的文本。 #block层不会响应文本高度。 - Ben Sewards

我喜欢这个答案，因为它的支持性更好，而不是纠结于 rgba。但是为什么 #text 必须是绝对定位呢？使用绝对定位的 #block 可以使其脱离文档流，不会影响页面中的其他元素。 - gdbj

Answer 3

仅适用于Less用户:

如果您不喜欢使用RGBA设置颜色，而是使用HEX设置颜色，那么有解决方案。

您可以使用类似以下的mixin:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

并像这样使用：

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

实际上，这也是一个内置的Less函数提供的功能:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

请参见如何使用Less编译器将十六进制颜色转换为rgba？

- Sebastien Lorber

---

喜欢这个解决方案 <3 <3 这是我的第一个 mixin，真是强大的东西。 - Michael

你也可以通过修改十六进制值的字符串末尾来实现此目的，而无需使用Less或mixin，并使用内联样式 https://www.w3schools.com/cssref/css_colors_legal.asp - Graham Hesketh

谢谢！我正在使用SCSS，并且做了类似这样的事情：background-color: rgba(red($primary), green($primary), blue($primary), 0.25); - TinyTiger

Answer 4

我也遇到了同样的问题。我想要一个完全透明的背景颜色。只需使用此代码即可；对我来说效果很好：

我遇到了同样的问题。我想要一个完全透明的背景颜色。只需使用这段代码，它对我非常有效：

rgba(54, 25, 25, .00004);

您可以在此网页的左侧（联系表格区域）查看示例。

- user2178930

---

如果你真的需要100%透明度，为什么不使用 rgba(54, 25, 25, 0);？大多数现代浏览器直到第15个小数位才会四舍五入，但视觉上你的99.996%透明度和使用100%透明度之间的差别很可能非常小。 - Ryan

Answer 5

这将适用于所有浏览器。

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

如果你不想让透明度影响到整个容器及其子元素，可以尝试使用以下方法。你需要使用相对定位的父元素和绝对定位的子元素来实现此效果。CSS Opacity That Doesn’t Affect Child Elements 这篇文章提供了具体实现方法。

在 CSS Opacity That Doesn't Affect "Children" 的页面上可以查看实际演示效果。

- Hussein

---

这会影响前景。OP明确要求仅针对背景进行处理。 - DSoa

@DSoa 有没有仅针对背景的解决方案？但是在不同的CSS行中使用RGB和Alpha？ - Sushan

Answer 6

我的技巧是创建一个带有颜色的透明.png，并使用background:url()。

- user1542894

---

如果你正在处理遗留浏览器，那么这是最好的解决方案，我个人认为。 - Erik Reppen

Answer 7

对于任何阅读这个帖子的人，我写了一个名为thatsNotYoChild.js的脚本，可以自动解决这个问题：

http://www.impressivewebs.com/fixing-parent-child-opacity/

基本上，它将子元素分离出来，但保持元素在页面上相同的位置。

- Louis L.

Answer 8

一个很好的方法是确实使用CSS 3。

在页面顶部创建一个带有类名（例如supersizer）的div：

然后设置以下CSS属性：

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }

<div class="supersizer"></div>

- Wolfgang Zotter

Answer 9

最简单的解决方案是创建3个

。其中一个将包含另外两个，一个带有透明背景，一个带有内容。将第一个

的位置设置为相对定位，并将带有透明背景的

设置为负的，然后调整内容的位置以适应透明背景。这样您就不会遇到绝对定位的问题了。

- Balsa

---

每个3个 div 中的一个都应该设置为相对定位，这样它们就可以在父 div 内部移动和调整，如果需要，还可以将父 div 移动到整个页面的上下文中。透明背景的 div 和内容 div 不应该包含彼此。它们应该是第一个 div 中的兄弟。 - Balsa

Answer 10

使用：

background:url("location of image"); // Use an image with opacity

这个方法在所有浏览器中都有效。

- Neeraj

---

我认为OP并不想使用图像，虽然这并没有明确说明。我并没有因此投反对票，只是试图澄清。 - Christian