CSS不透明度只有背景色，而不是文字上吗?

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

我试过了:

background: #CCC;
opacity: 0.6;

但这不会改变不透明度。

当前回答

我也有同样的问题。我想要100%透明的背景色。只需使用这段代码;这对我来说非常有效:

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

你可以在这个网页的左边(联系表单区域)看到一些例子。

其他回答

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

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

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

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

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

Use:

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

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

对于任何遇到这个线程的人，这里有一个名为thatsNotYoChild.js的脚本，我刚刚写的，它自动解决了这个问题:

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

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

仅适用于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%);
}

看我如何转换十六进制的颜色与rgba与少编译器?

推荐文章