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

是否有可能，仅使用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。

1571108 次浏览
小开

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

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

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

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

小开

背景的不透明度，但不是文本有一些想法。要么使用半透明图像，要么覆盖一个额外的元素。

小开

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

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

否则就不可能了。

就像Chris提到的：如果您使用透明的PNG文件，则必须使用JavaScript解决方法才能使其在讨厌的Internet Explorer中工作……

小开

有一段时间，我在跨浏览器背景透明与CSS中写了这篇文章。

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

小开
最佳答案

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

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

这是css3.info的一篇文章，不透明度，RGBA和妥协（2007-06-03）。

当心，文本仍然需要足够的对比度与背景，一旦底层背景照耀。

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

小开

最好用半透明的#0.

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

在Firefox 3和Safari3中，您可以像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>

Chrome-33IE11IE9IE8

小开

这是我如何做到这一点（它可能不是最佳的，但它有效）：

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

然后，正下方那个div，创建另一个具有不同类/id的div。在其中创建一个段落，您将在其中放置文本。给出div位置：相对，顶部：-295px（即负 295像素）。给它一个z索引为2作为良好的测量，并确保其不透明度为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>

这适用于Safari2. x，但我不知道Internet Explorer。

小开

对于简单的半透明背景颜色，上述解决方案（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很重要；它告诉返回层适合窗格的大小。（如果您需要<p>标签是绝对的，请将窗格从<p>更改为<span>，并将所有内容包装在绝对位置<p>标签中。）

与上面列出的类似技术相比，这种技术的主要优点是窗格不必是指定的大小；如上所述，它将适合全宽（正常的块元素布局）并且仅与内容一样高。外部窗格元素可以按您喜欢的方式调整大小，只要它是矩形的（即inline-block可以工作；普通的内联不会）。

此外，它为背景提供了很大的自由度；您可以自由地将任何内容放在后面元素中，并且不会影响内容的流动（如果您想要多个全尺寸子图层，请确保它们也有位置：绝对，宽度/高度：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上的边距或窗格上的填充），否则你会发现奇怪的地方，比如页面总是比浏览器窗口稍宽。
  • 如前所述，整个事情需要块或内联块。随意使用<div>而不是<span>来简化您的CSS。

一个更完整的演示，通过与display: inline-block结合使用来展示这种技术的灵活性，以及auto和特定的widths/min-heights：

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

这里有一个现场演示的技术被广泛使用：

christmas-card-2009.slippyd.com截图

小开

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

将一个容器div和两个子容器div放在同一级别，一个用于内容，一个用于背景。使用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>

小开

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

我时不时地遇到这个问题，所以我决定写一些让生活变得容易得多的东西。脚本不到2 KB，只需要一行代码即可运行，如果你愿意，它还可以处理背景的不透明度动画。

小开

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

我们需要做的是加入CSS工作组的讨论，让他们给我们一个背景不透明属性！它应该与多背景功能携手合作。

小开

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

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

一个例子（小提琴）（注意，DIV和类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后面的位置为绝对（使用零或更适合您需求的值）。

小开

简单地说，上面提到的背景颜色：rgba（255,0,0,0.5）；是最好的答案。说使用CSS 3，即使在2013年，也不简单，因为来自各种浏览器的支持级别随着每次迭代而变化。

虽然所有主流浏览器都支持background-color（不是CSS 3的新版本）[1]，但alpha透明度可能很棘手，特别是在版本9之前的Internet Explorer和版本5.1之前的Safari边框颜色[2]

使用指南针或SASS之类的东西可以真正帮助生产和跨平台兼容性。

[1]W3学校：CSS背景颜色属性

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

小开

CSS 3为您的问题提供了一个简单的解决方案。使用：

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

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

小开

您可以使用渐变语法通过（ab）解决Internet Explorer 8的问题。颜色格式是ARGB。如果您使用的是萨斯预处理器，您可以使用内置函数“ie-hex-str（）”转换颜色。

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

如果你是一个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**}
小开

有一个技巧可以最小化标记：使用伪元素作为背景，您可以在不影响main元素及其子元素的情况下将不透明度设置为它：

演示

输出：

伪元素的背景不透明度

相关代码：

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及更高版本。

小开 
<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);

这就是全部：）

小开

如果你使用更少，你可以使用fade(color, 30%)。

小开

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

例如，

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

//值越小，透明度越高，值越少，透明度越高。

小开

我通常用这门课来做我的工作。它很好。

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

小开

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

小开

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

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;
小开

这给出了想要的结果——

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

设置背景的不透明度。

小开

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

示例

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

这可以在标题、段落等的背景<强>和中使用。

小开

我同意上述所有答案，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;}
小开

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

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

提交答案