如何使用 CSS 为文本或图像赋予透明背景？

有一个技巧可以最小化标记：使用伪元素作为背景，你可以设置它的不透明度而不影响主元素及其子元素：

DEMO

输出：

https://i.stack.imgur.com/8lK67.jpg

相关代码：

{ 位置：相对； } p:after { 内容：'';位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；背景：#fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";不透明度：0.6； z 指数：-1； } /*** 以下仅用于演示样式 ***/ body { background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;背景尺寸：封面； } p { 宽度：50%；填充：1em；保证金：10% 自动；字体系列：arial、serif；颜色：#000； } img { 显示：块；最大宽度：90%；边距：0.6em 自动； }

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Sed a ligula ut nunc dignissim molestie。

浏览器支持为 Internet Explorer 8 及更高版本。

伪元素

不透明度

最好使用半透明的.png。

只需打开 Photoshop，创建一个 2x2 像素图像 (picking 1x1 can cause an Internet Explorer bug!)，将其填充为绿色并将“图层选项卡”中的不透明度设置为 60%。然后保存并使其成为背景图像：

<p style="background: url(green.png);">any text</p>

当然，它很酷，除了可爱的 Internet Explorer 6。有更好的修复可用，但这里有一个快速破解：

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

此方法允许您在背景中拥有图像而不仅仅是纯色，并且可用于在其他属性（例如边框）上具有透明度。不需要透明的PNG图像。

在 CSS 中使用 :before（或 :after）并为其指定 opacity 值以使元素保持其原始不透明度。因此，您可以使用 :before 制作人造元素并为其提供所需的透明背景（或边框），并使用 z-index 将其移动到要保持不透明的内容后面。

一个示例 (fiddle)（请注意，类 dad 的 DIV 只是为了提供一些上下文和颜色对比，这个额外的元素实际上是不需要的，红色矩形向下移动了一点，使 fancyBg 元素后面的背景可见的权利）：

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

使用这个 CSS：

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

在这种情况下，.fancyBg:before 具有您想要的透明 CSS 属性（在本例中为红色背景，但可以是图像或边框）。将其定位为绝对位置以将其移到 .fancyBg 后面（使用零值或更适合您需要的值）。

最简单的方法是使用半透明背景 PNG 图像。

如果需要，您可以使用 JavaScript 使其在 Internet Explorer 6 中工作。

我使用 Transparent PNGs in Internet Explorer 6 中列出的方法。

除此之外，您可以使用两个并排的兄弟元素来伪造它 - 使一个半透明，然后将另一个绝对定位在顶部。

几乎所有这些答案都假设设计师想要纯色背景。如果设计师真的想要一张照片作为背景，那么目前唯一真正的解决方案是 JavaScript，例如 jQuery Transify 插件 mentioned elsewhere。

我们需要做的是加入 CSS 工作组讨论，让他们给我们一个 background-opacity 属性！它应该与多背景功能齐头并进。

问题是，在您的示例中，文本实际上 具有 完全不透明度。它在 p 标记内完全不透明，但 p 标记只是半透明的。

您可以添加一个半透明的 PNG 背景图像而不是在 CSS 中实现它，或者将文本和 div 分成两个元素并将文本移动到框上（例如，负边距）。

否则就不可能了。

就像 Chris 提到的：如果您使用具有透明度的 PNG 文件，您必须使用 JavaScript 变通方法才能使其在讨厌的 Internet Explorer 中工作......

这是我这样做的方法（它可能不是最佳的，但它有效）：

创建您希望半透明的 div。给它一个类/ id。让它为空，然后关闭它。给它一个设定的高度和宽度（比如，300 像素 x 300 像素）。给它一个 0.5 或任何你喜欢的不透明度和背景颜色。

然后，在该 div 的正下方，创建另一个具有不同类/ID 的 div。在其中创建一个段落，您将在其中放置文本。给出 div 位置：相对，顶部：-295px（即 负 295 像素）。将其 z-index 设为 2 以获得良好的度量，并确保其不透明度为 1。根据需要设置段落的样式，但确保尺寸小于第一个 div 的尺寸，以免溢出。

而已。这是代码：

.trans { 不透明度：0.5;高度：300px；宽度：300px；背景颜色：橙色； } .trans2 { 不透明度：1；位置：相对；顶部：-295px； } .trans2 p { 宽度：295px;颜色：黑色;字体粗细：粗体； }

这适用于 Safari 2.x，但我不了解 Internet Explorer。

如果您是 Photoshop 人，您还可以使用：

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

或者：

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

这是一个 jQuery 插件，它将为您处理所有事情，Transify (Transify - a jQuery plugin to easily apply transparency / opacity to an element’s background)。

我时不时地遇到这个问题，所以我决定写一些能让生活更轻松的东西。该脚本小于 2 KB，只需要一行代码即可运行，如果您愿意，它还可以处理背景不透明度的动画。

不久前，我在 Cross Browser Background Transparency With CSS 中写过这个。

奇怪的是 Internet Explorer 6 将允许您使背景透明并保持顶部的文本完全不透明。对于其他浏览器，我建议使用透明的 PNG 文件。

Opacity of background, but not the text 有一些想法。要么使用半透明图像，要么覆盖附加元素。

CSS 3 可以轻松解决您的问题。利用：

background-color:rgba(0, 255, 0, 0.5);

这里，rgba 代表红色、绿色、蓝色和 alpha 值。绿色值是因为 255 而获得的，而半透明度是通过 0.5 alpha 值获得的。

为了使元素的背景半透明，但元素的内容（文本和图像）不透明，您需要为该图像编写 CSS 代码，并且必须添加一个名为 opacity 的属性最小值。

例如，

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// 值越小越透明，或者值越小越透明。

如果您使用 Less，则可以使用 fade(color, 30%)。

背景颜色：rgba(255, 0, 0, 0.5);如上所述，简单地说就是最好的答案。说使用 CSS 3，即使在 2013 年，也并不简单，因为各种浏览器的支持水平随着每次迭代而变化。

虽然所有主要浏览器都支持 background-color（不是 CSS 3 的新功能）[1]，但 alpha 透明度可能很棘手，尤其是对于 9 版之前的 Internet Explorer 和 5.1 版之前的 Safari 上的边框颜色。 [2]

使用 Compass 或 SASS 之类的东西确实有助于生产和跨平台兼容性。

[1] W3Schools: CSS background-color Property

[2] Norman's Blog: Browser Support Checklist CSS3 (October 2012)

您可以通过 (ab) 使用梯度语法来解决 Internet Explorer 8 的问题。颜色格式为 ARGB。如果您使用的是 Sass 预处理器，您可以使用内置函数“ie-hex-str()”转换颜色。

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/？

有一个更简单的解决方案可以在同一个 div 上的图像上叠加。这不是正确使用此工具。但是使用 CSS 进行叠加就像一个魅力。

使用这样的嵌入阴影：

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

就这样 ：）

您可以使用附加到十六进制值的不透明度值：

background-color: #11ffeeaa;

在本例中，aa 是不透明度。 00 的不透明度表示透明，ff 表示纯色。

不透明度是可选的，因此您可以像往常一样使用十六进制值：

background-color: #11ffee;

您还可以将旧方法与 rgba() 一起使用：

background-color: rgba(117, 190, 218, 0.5);

如果您想确保背景没有其他样式（如图像或渐变），则使用 background 简写：

background: #11ffeeaa;

来自 Mozilla 的规范 (https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)：

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

我通常在我的工作中使用这个类。这个很不错。

.transparent { 过滤器：alpha(opacity=50); /* Internet Explorer */ -khtml-opacity: 0.5; /* KHTML 和旧版 Safari */ -moz-opacity: 0.5; /* Firefox 和 Netscape */ opacity: 0.5; /* Firefox、Safari 和 Opera */ }

使用格式 #AARRGGBB 时它对我有用，所以对我有用的是 #1C00ff00。试一试，因为我已经看到它对某些人有效，而对其他人无效。我在 CSS 中使用它。

由于很多人会来到这里想知道如何调整任何元素（不仅仅是背景）的不透明度，这就像添加 opacity: 0.2（或其他任何内容）一样简单0 到 1 之间的数字）到该元素的 CSS。

例子

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

这可以用于背景和标题、段落等。

我同意上述所有答案，并且 rgba 是要走的路。就我而言，我以编程方式获得了十六进制背景，因此我必须根据十六进制代码生成自己的 rgba。我创建了 Mr. Down's answer 的修改版本以将十六进制转换为 rgba

function hexToRgba(hex,alpha) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if(result!=null){
      const r = parseInt(result[1], 16);
      const g = parseInt(result[2], 16);
      const b = parseInt(result[3], 16);
      //
      return `rgba(${r},${g},${b},${alpha})`;

    }
    return null;
  }

我认为这会给你想要的输出：

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

这给出了预期的结果 -

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

设置背景的不透明度。