CSS opacity 只给背景色，而不是文字就可以了？ [复制]

Question

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

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

6年前关闭。

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

我试过了：

background: #CCC;
opacity: 0.6;

但这不会改变不透明度。

Answer 1

听起来您想使用透明背景，在这种情况下，您可以尝试使用rgba()函数：

rgba(R, G, B, A)

R（红色）、G（绿色）和 B（蓝色）可以是<integer> s 或<percentage> s，其中数字 255 对应于 100%。 A (alpha) 可以是介于 0 和 1 之间的<number>或<percentage> ，其中数字 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语法。

Answer 2

最简单的方法是使用 2 个 div，1 个用于背景，1 个用于文本：

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

Answer 3

仅适用于较少用户：

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

你可以使用像这样的混合：

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

Answer 4

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

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 不透明度

检查不影响“儿童”的 CSS Opacity 上的工作演示

Answer 6

我有同样的问题。 我想要一个 100% 透明的背景颜色。 只需使用此代码； 它对我很有用：

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

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

Answer 7

做到这一点的一个好方法是确实使用 CSS 3。

创建一个 div 宽度类 - 例如在页面顶部的 supersizer：

然后设置以下 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>

Answer 8

对于遇到此线程的任何人，这是我刚刚编写的一个名为 thatsNotYoChild.js 的脚本，它可以自动解决此问题：

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

基本上，它将子元素与父元素分开，但将元素保持在页面上的相同物理位置。

Answer 9

最简单的解决方案是创建 3 个divs 。 一个将包含另外两个，一个具有透明背景，另一个包含内容。 使第一个 div 的位置相对并将具有透明背景的那个设置为负z-index ，然后调整内容的位置以适应透明背景。 这样您就不会遇到绝对定位问题。

Answer 10

用：

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

此方法适用于所有浏览器。

Answer 11

你不能。 你必须有一个单独的 div 就是那个背景，这样你就可以只应用不透明度。

我最近尝试这样做，因为我已经在使用 jQuery，我发现以下是最不麻烦的：

1. 创建两个不同的 div。 他们将是兄弟姐妹，不包含在彼此或任何东西中。
2. 给text div 一个纯背景色，因为这将是无 JavaScript 的默认值。
3. 使用 jQuery 获取text div 的高度，并将其应用于background div。

我确信有某种 CSS ninja 方法可以只用浮点数或其他东西来完成所有这些，但我没有耐心弄清楚。