CSS的不透明度只能是背景颜色，而不是文字吗？[重复]

你不能 您必须有一个仅属于该背景的单独的div，以便您只能对此应用不透明度。

我最近尝试这样做，并且由于我已经在使用jQuery，因此发现以下问题最少：

1. 创建两个不同的div。他们将是兄弟姐妹，彼此之间或彼此之间不包含任何东西。
2. 为textdiv提供纯色的背景颜色，因为这将是不含JavaScript的默认颜色。
3. 使用jQuery获取textdiv的高度，并将其应用于backgrounddiv。

我敢肯定，有某种CSS忍者方式只能用浮点数或其他方式来完成所有这些工作，但是我没有耐心去弄清楚。

采用：

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

此方法将在所有浏览器中起作用。

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

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

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

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

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

仅针对较少的用户：

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

您可以使用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？

我的诀窍是使用color创建一个透明的.png并使用background:url()。

我有同样的问题。我想要100％透明的背景色。只需使用此代码；这对我来说很棒：

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

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

最简单的方法是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不透明度下查看有效的演示

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

rgba(R, G, B, A)

R（红色），G（绿色）和B（蓝色）可以是<integer>s或<percentage>s，其中数字255对应于100％。a（alpha）可以是<number>0到1之间的a <percentage>，也可以是a ，其中数字1对应于100％（完全不透明）。

RGBa示例

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

一个显示如何使用的小示例rgba。

从2018年开始，几乎每个浏览器都支持rgba语法。