CSS opacity 只给背景色，不给文字就可以了？ [复制]

Posted 2023-02-21

【中文标题】CSS opacity 只给背景色，不给文字就可以了？ [复制]

【英文标题】：CSS opacity only to background color, not the text on it? [duplicate]

【发布时间】：2011-07-05 08:03:25

【问题描述】：

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

我试过了：

background: #CCC;
opacity: 0.6;

但这不会改变不透明度。

【问题讨论】：

对于跨浏览器的方法，请参见我之前给出的答案：***.com/questions/4792090/… 基本上是rgba，但它适用于任何地方。

这个问题是在一月份提出的——***.com/questions/637921/…

同一月份的第二个问题在这里提出：***.com/questions/4790563/…

【参考方案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 示例

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

一个小的example 展示了如何使用rgba。

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

【讨论】：

@adam 你知道，这在 IE 中是行不通的。

Dang..为什么总是 IE 破坏了乐趣？！

在 IE9+ 中运行良好 ;o)

背景色：rgba(54, 25, 25, .5);也适用于 Chrome、Mozilla、IE 10

是的，使用 rgba() 在大多数情况下都有效，但如果在 css 中有一个“背景不透明度：”属性会很好，因为当“背景颜色：”是动态设置的（即时）作为管理外观面板中设置功能的输入，该面板已被编码为仅使用 rgb()，并且您不想在您的 css 中覆盖它，因为您的功能中的动态输入行不通。在这种情况下，添加不透明度的唯一方法是修改 html。如果有“背景不透明度”属性，则无需修改 html 代码...

【参考方案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>

【讨论】：

以下属性 - “位置：绝对；”必须在 #text 类中才能使效果起作用。

但这不是一个好主意，以防我们有另一个绝对定位的 div，其位置取决于#container 的父相对元素

当您需要由您的文本确定#block opac 背景位置时会发生什么？例如：将鼠标悬停在促销块上会显示促销块一半大小的文本。 #block 图层不会响应文本高度。

我喜欢这个答案而不是摆弄 rgba，因为它得到了更好的支持。但是为什么#text 必须是绝对位置？ #block 在绝对位置时，它会脱离流程，不会影响页面中的其他元素。

【参考方案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?

【讨论】：

喜欢这个解决方案

【参考方案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"

上查看工作演示

【讨论】：

这会影响前景。 OP 仅专门要求提供背景信息。

@DSoa 仅用于背景的任何解决方案？但在不同的 css 行中使用 rgb 和 alpha

【参考方案5】：

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

【讨论】：

如果您使用的是旧版浏览器，这是最好的解决方案，IMO。

【参考方案6】：

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

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

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

【讨论】：

如果你真的想要 100% 透明，为什么不使用rgba(54, 25, 25, 0);？大多数现代浏览器直到小数点后 15 位才会四舍五入，但在 99.996% 透明和仅使用 100% 透明之间，视觉差异很可能非常小。

【参考方案7】：

真正做到这一点的一个好方法是使用 CSS 3。

为类创建一个 div 宽度 - 例如页面顶部的 supersizer：

然后设置以下 CSS 属性：

  .supersizer 
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/***_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>

【参考方案8】：

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

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

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

【参考方案9】：

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

【讨论】：

3 个 div 中的每一个都应设置为相对定位，以便它们可以在父 div 内移动和调整，并且父 div（如果需要）也可以在整个页面的上下文中移动。具有透明背景的 div 和具有内容的 div 不应相互包含。他们应该是第一个 div 的兄弟姐妹。

【参考方案10】：

用途：

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

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

【讨论】：

我不认为 OP 想要使用图像，尽管它没有说明这一点。对此没有投反对票，只是想澄清一下。

【参考方案11】：

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

我最近尝试过这样做，因为我已经在使用 jQuery，所以我发现以下是最省事的：

创建两个不同的 div。他们将是兄弟姐妹，不包含在彼此或任何东西中。 为text div 提供纯色背景色，因为这将是无 javascript 的默认设置。 使用 jQuery 获取text div 的高度，并将其应用到background div。

我确信有某种 CSS ninja 方法可以仅使用浮点数或其他东西来完成所有这些操作，但我没有耐心去弄清楚。

【讨论】：

background: rgba(54, 25, 25, .5); 一定是你说的css ninja。 :)