Question

我是否可以将opacity属性仅分配给background的{{1}}属性，而不是其中的文字？

我试过了：

div

但这不会改变不透明度。

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示例
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 */ 

小example显示如何使用rgba。

截至2018年，几乎是every browser supports the rgba syntax。

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

仅限Less位用户：

如果您不想使用RGBA设置颜色，而是使用HEX，则可以使用解决方案。

您可以使用mixin：

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

并使用它：

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

实际上这是built-in Less function也提供的内容：

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

请参阅 How do I convert a hexadecimal color to rgba with the Less compiler?

Answer 4

这适用于所有浏览器

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 Opacity That Doesn’t Affect Child Elements

检查 CSS Opacity That Doesn't Affect "Children"

上的工作演示

Answer 5

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

Answer 6

我遇到了同样的问题。我想要100％透明的背景色。只需使用此代码;它对我很有用：

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

您可以在left side on this web page（联系表单区域）上查看示例。

Answer 7

实现这一目标的一个好方法是使用CSS 3。

创建一个div宽度类 - 例如页面顶部的超级化器：

然后设置以下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。一个将包含其他2，一个具有透明背景和一个具有内容。使第一个div的位置相对，并将透明背景设置为负z-index，然后调整内容的位置以适应透明背景。这样你就不会遇到绝对定位问题。

Answer 10

使用：

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

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

Answer 11

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

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

创建两个不同的div。他们将是兄弟姐妹，彼此之间没有任何东西或任何东西。
为text div提供纯色背景色，因为这将是无JavaScript的默认值。
使用jQuery获取text div的高度，并将其应用于background div。

我确信有一种CSS忍者的方式来做所有这些只有花车或其他东西，但我没有耐心去弄明白。

CSS不透明度只对背景颜色，而不是文字就可以了？

11 个答案:

`rgba(R, G, B, A)`

RGBa示例