CSS不透明度只适用于背景色，而不是其上的文字？

我可以只给div'的background'属性分配`opacity'属性，而不给它的文本分配吗？

我已经试过了。

background: #CCC;
opacity: 0.6;

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

Peter Mortensen
已编辑的问题 30日 三月 2019 в 9:44
编程
css opacity
27日 二月 2011 в 6:30
31 种观点
对该问题的评论 (3)
解决办法

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

rgba(R, G, B, A).

R（红色）、G（绿色）和B（蓝色）可以是s或s，其中数字255对应于100%。A（alpha）可以是0到1之间的，或者，其中数字1对应100%（完全不透明）。

RGBa例子

rgba(51, 170, 51, .1) /10%不透明的绿色 / rgba(51, 170, 51, .4) / 40%不透明的绿色 / rgba(51, 170, 51, .7) /70%不透明的绿色 / rgba(51, 170, 51, 1) /完全不透明的绿色 /

一个小的[例子][2]显示了如何使用rgba。

截至2018年，实际上[所有的浏览器都支持rgba语法]（https://caniuse.com/#feat=css3-colors）。

评论(10)

最简单的方法是使用2个div，一个是背景，一个是文本。

#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>
评论(4)

仅供[少][1]用户使用：。

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

你可以使用一个混合器，比如：{{8522802}}。

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

并像这样使用它。

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

其实这也是一个[内置Less函数][2]所提供的。

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

见https://stackoverflow.com/questions/14860874/how-do-i-convert-a-hexadecimal-color-to-rgba-with-the-less-compiler

[1]: http://lesscss.org [2]: http://lesscss.org/functions/#color-operations-fade

Peter Mortensen
编辑本段答案30日 三月 2019 в 9:54
评论(0)

这将适用于所有的浏览器

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不透明度][1]。

在[CSS不透明度不影响"Children"][2]查看工作演示。

[1]: http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ [2]: http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Peter Mortensen
编辑本段答案30日 三月 2019 в 9:48
评论(1)

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

评论(1)

我也有同样的问题。 我想要一个100%透明的背景色。 只要使用这个代码。 它'的工作对我来说是伟大的。

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

您可以在本网页左侧(联系表区域)看到例子。

1:

Peter Mortensen
编辑本段答案30日 三月 2019 в 9:49
评论(1)

一个很好的方法就是使用CSS 3确实。

创建一个div width一个类--例如。 supersizer在你的页面顶部。

然后设置以下CSS属性。

<！--开始片段。 js hide: false -->

  .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>

<！--结束片段-->

Peter Mortensen
编辑本段答案30日 三月 2019 в 9:51
评论(0)

对于任何来过这个线程的人，这里有一个我刚刚写的名为thatsNotYoChild.js的脚本，可以自动解决这个问题。

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

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

评论(0)

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

评论(1)

使用。

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

这种方法在所有浏览器中都能使用。

Peter Mortensen
编辑本段答案30日 三月 2019 в 9:50
评论(1)

你不能这样做。你必须有一个单独的DIV，它就是那个背景，这样你就可以只对它应用不透明度。

我最近尝试这样做，由于我已经在使用jQuery，我发现以下方法是最省事的。

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

我确信有一些CSS忍者的方法可以只用浮动或其他方法来完成这一切，但我没有耐心去弄清楚。

Peter Mortensen
编辑本段答案30日 三月 2019 в 9:45
评论(1)