我可以将不透明度属性分配给一个div的背景属性,而不是它的文本吗?

我试过了:

background: #CCC;
opacity: 0.6;

但这不会改变不透明度。


当前回答

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

其他回答

你不能。你必须有一个单独的div作为背景,这样你只能对它应用不透明度。

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

创建两个不同的div。他们会是兄弟姐妹,彼此之间没有羁绊。 给文本div一个纯背景色,因为这将是无javascript的默认值。 使用jQuery获取文本div的高度,并将其应用到背景div。

我相信有一些CSS忍者的方法来做所有这些,只有浮动或其他东西,但我没有耐心去弄清楚。

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

听起来你想要使用一个透明的背景,在这种情况下,你可以尝试使用rgba()函数:

rgba(R, G, B, A) R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity). RGBa example 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语法。

Use:

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

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

这适用于所有浏览器

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不透明不影响“孩子”的地方检查一个工作演示