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

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

我试过：

background: #CCC;opacity: 0.6;

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

2124769 次浏览
小开

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

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

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

我相信有某种CSS忍者的方式来完成这一切，只有浮点数或其他东西，但我没有耐心去弄清楚。

小开
最佳答案

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

rgba(R, G, B, A)

R（红色）、G（绿色）和B（蓝色）可以是<integer>或<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年，几乎每个浏览器都支持#0语法。

小开

最简单的方法是使用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>

小开

这将适用于所有浏览器

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不透明度处的工作演示

小开

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

小开

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

小开

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

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

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

小开

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

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

小开

用途：

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

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

小开

做到这一点的一个好方法是确实使用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>

小开

对于仅限较少用户：

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

你可以使用一个Mixin，比如：

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

并像这样使用它：

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

实际上，这是内置少功能也提供的：

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

见我如何将十六进制颜色转换为rgba与少编译器？


提交答案