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

Question

是否可以仅使用 CSS 使background元素的半透明但元素的内容（文本和图像）不透明？

我想在不将文本和背景作为两个独立元素的情况下完成此操作。

尝试时：

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

看起来子元素受其父元素的不透明度影响，因此opacity:1相对于opacity:0.6父元素。

score 2355 · Accepted Answer

使用半透明的PNG或SVG图像或使用 CSS：

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

这是一篇来自 css3.info、Opacity、RGBA 和折衷的文章(2007-06-03)。

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

score 482 · Accepted Answer

在 Firefox 3 和 Safari 3 中，您可以像Georg Schölly 提到的那样使用 RGBA 。

一个鲜为人知的技巧是，您可以在 Internet Explorer 中使用它，也可以使用渐变过滤器。

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

第一个十六进制数定义颜色的 alpha 值。

完整解决方案所有浏览器：

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

这是来自CSS 背景透明度而不影响子元素，通过 RGBa 和过滤器。

结果截图证明：

这是使用以下代码时：

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

铬-33 IE11 IE9 IE8

score 115 · Accepted Answer

这是我能想到的最好的解决方案，不使用 CSS 3。据我所知，它在 Firefox、Chrome 和 Internet Explorer 上运行良好。

将一个容器div和两个childrendiv放在同一层，一个用于内容，一个用于背景。并使用 CSS，自动调整背景大小以适应内容，并使用 z-index 将背景实际放在后面。

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}

<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

score 66 · Accepted Answer

对于简单的半透明背景颜色，上述解决方案（CSS3 或 bg 图像）是最佳选择。但是，如果你想做一些更花哨的事情（例如动画、多背景等），或者你不想依赖 CSS3，你可以尝试“窗格技术”：

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}

<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

该技术通过在外部窗格元素内部使用两个“层”来工作：

一个（“背面”）适合窗格元素的大小而不影响内容的流动，
还有一个（“cont”）包含内容并帮助确定窗格的大小。

上position: relative窗格很重要；它告诉后层适合窗格的大小。（如果您需要标签是绝对的，请将窗格从 a 更改为 a并将所有内容包装在绝对位置标签中。）

与上面列出的类似技术相比，该技术的主要优点是窗格不必是指定的大小。如上所述，它将适合全宽（正常块元素布局）并且仅与内容一样高。外部窗格元素可以任意调整大小，只要它是矩形的即可（即 inline-block 可以使用；plain-old inline 不行）。

此外，它还为您提供了很大的背景自由度；您可以自由地将任何东西放在后面的元素中，并且不会影响内容的流动（如果您想要多个全尺寸子层，只需确保它们也有位置：绝对，宽度/高度：100%，和上/下/左/右：自动）。

允许背景插入调整（通过上/下/左/右）和/或背景固定（通过删除左/右或上/下对之一）的一种变体是使用以下 CSS 代替：

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

正如所写，这适用于 Firefox、Safari、Chrome、IE8+ 和 Opera，尽管 IE7 和 IE6 需要额外的 CSS 和表达式、IIRC，上次我检查时，第二个 CSS 变体在 Opera 中不起作用。

需要注意的事项：

不会包含 cont 层内的浮动元素。您需要确保它们被清除或以其他方式包含，否则它们会从底部滑出。
边距在窗格元素上，填充在 cont 元素上。不要使用相反的内容（cont 上的边距或窗格上的 padding），否则您会发现页面总是比浏览器窗口稍宽的奇怪现象。
如前所述，整个事情需要是块或内联块。随意使用<div>s 而不是s 来简化您的 CSS。

display: inline-block一个更完整的演示，通过与, 以及auto& 特定width的 s/ s一起使用来展示这种技术的灵活性min-height：

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }

<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

这是该技术被广泛使用的现场演示：

score 58 · Accepted Answer

最好使用半透明的.png。

只需打开Photoshop，创建一个2x2像素图像（选择1x1会导致 Internet Explorer 错误！），用绿色填充它并将“图层选项卡”中的不透明度设置为 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');
}

score 58 · Accepted Answer

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

演示

输出：

带有伪元素的背景不透明度

相关代码：

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

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

score 22 · Accepted Answer

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

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

我使用Internet Explorer 6 中的透明 PNG 中概述的方法。

除此之外，您可以使用两个并排的兄弟元素来伪造它- 使一个 semi-transparent，然后将另一个绝对定位在 top 上。

score 21 · Accepted Answer

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

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

一个例子（小提琴）（注意DIVwith 类dad只是为了提供一些上下文和颜色对比，这个额外的元素实际上是不需要的，红色矩形向下和向右移动了一点，使后面的背景可见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（使用零值或更适合您需要的值）。

score 16 · Accepted Answer

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

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

否则就不可能了。

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

score 15 · Accepted Answer

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

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

score 14 · Accepted Answer

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

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

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

而已。这是代码：

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}

<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

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

score 12 · Accepted Answer

这是一个 jQuery 插件，它将为您处理所有事情，Transify（Transify - 一个 jQuery 插件，可以轻松地将透明度/不透明度应用于元素的背景）。

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

score 11 · Accepted Answer

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

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

score 11 · Accepted Answer

如果您是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**
}

score 9 · Accepted Answer

背景不透明，但不是文字有一些想法。要么使用半透明图像，要么覆盖附加元素。

score 8 · Accepted Answer

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

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

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

score 8 · Accepted Answer

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

例如，

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

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

score 7 · Accepted Answer

背景颜色：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 属性

[2] Norman 的博客：浏览器支持清单 CSS3（2012 年 10 月）

score 7 · Accepted Answer

7

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

于 2015-06-03T07:28:45.563 回答

score 5 · Accepted Answer

5

于 2014-09-14T19:21:50.677 回答

score 5 · Accepted Answer

您可以通过（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')";

score 3 · Accepted Answer

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

score 3 · Accepted Answer

你可以rgba color code像下面给出的这个例子一样使用 CSS 来做到这一点。

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}

<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

score 3 · Accepted Answer

根据我的观点，使用具有不透明度的背景颜色的最佳方法如下。如果我们使用它，那么我们不会失去其他元素的不透明度，比如测试颜色、边框等。

background-color: rgba(71, 158, 0, 0.8);

使用具有不透明度的背景颜色

background-color: rgba(R, G, B, Opacity);

score 2 · Accepted Answer

您可以在CSS中使用RGBA 。像这样的东西：(red, green, blue, alpha)

所以简单地做这样的事情就可以在你的情况下工作：

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

score 1 · Accepted Answer

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

使用这样的嵌入阴影：

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

就这样：）

score 1 · Accepted Answer

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

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;

score 0 · Accepted Answer

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

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

score 0 · Accepted Answer

我同意上述所有答案，并且 rgba 是要走的路。就我而言，我以编程方式获得了十六进制背景，因此我必须根据十六进制代码生成自己的 rgba。我创建了唐先生答案的修改版本，将十六进制转换为 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;
  }

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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;   
}

score 0 · Accepted Answer

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

例子

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

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

score 0 · Accepted Answer

这给出了预期的结果 -

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

设置背景的不透明度。

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

33 回答 33

结果截图证明：

或者：

例子

Related

Reference