我如何使用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有关。
要么使用半透明的PNG图像，要么使用CSS3：
background-color:rgba(255,0,0,0.5);
这是css3.info， Opacity，RGBA和妥协文章 （2007-06-03）。
在Firefox 3和Safari 3中，可以使用像GeorgSchölly所说的 RGBA。
一个鲜为人知的技巧是，你可以在Internet Explorer中使用渐变filter。
background-color: rgba(0, 255, 0, 0.5); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
第一个hex数字定义了颜色的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和filter 。
截图结果certificate：
这是使用下面的代码时：
<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>
这是我可以想出的最好的解决scheme，而不是使用CSS3。据我所知，它在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>
最好使用半透明的.png 。
只要打开Photoshop ，创build一个2x2像素的图像（ select1x1可以导致一个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'); }
对于简单的半透明背景颜色，上述解决scheme（CSS3或bg图像）是最佳select。 但是，想要做一些更有趣的事情（例如animation，多种背景等），或者如果你不想依赖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>
该技术通过在外部窗格元素内部使用两个“图层”来工作：
- 一个（“后面”）适合窗格元素的大小而不影响内容的stream动，
- 和一个（“cont”）包含内容并帮助确定窗格的大小。
position: relative对于窗格是重要的; 它会告诉图层适合窗格的大小。 （如果您需要<p>标记为绝对标签，请将窗格从<p>更改为<span>并将所有内容包含在绝对位置<p>标记中。
这种技术与上面列出的类似技术相比的主要优点是，窗格不必是指定的大小; 如上面所编码的，它将适合全angular（正常的块元素布局）并且只与内容一样高。 外部窗格元素的大小可以任意调整，只要它是矩形的（即内联块可以工作，简单的内联不会）。
另外，它给了你很多背景的自由。 你可以自由地将任何东西放在后面的元素中，并且不影响内容的stream动（如果你想要多个全尺寸的子层，只要确保它们的位置是：absolute，width / height：100％，和上/下/左/右：自动）。
允许背景embedded调整（通过上/下/左/右）和/或背景钉扎（通过移除左/右或顶/底对之一）的一种变型是使用下面的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和expression式，IIRC，上次我检查，第二个CSS变化不起作用的Opera。
需要注意的事项：
- cont层中的浮动元素将不被包含。 你需要确保他们被清除或以其他方式包含在内，否则他们将从底部滑落。
- 窗格元素的边距将在cont元素上进行。 不要使用反面（页面上的边距或页面上的边距），否则会发现诸如页面总是比浏览器窗口稍宽的怪异现象。
- 如前所述，整个事情需要是块或内联块。 随意使用
<div>s而不是<span>s来简化你的CSS。
一个更完整的演示：
.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>
有一个技巧来最大限度地减less标记：使用伪元素作为背景，你可以设置不透明度，而不影响主元素及其子元素：
DEMO
输出：
相关代码：
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>
最简单的方法是使用半透明的背景PNG图像 。
如果需要，可以使用JavaScript使其在Internet Explorer 6正常工作。
我使用Internet Explorer 6中透明PNG中列出的方法。
除此之外，
你可以使用two side-by-side sibling elements来伪造它 – 使一个半透明 ，然后absolutely position the other over the top ？
这种方法允许你在背景中有一个图像，而不仅仅是一个纯色，并且可以用来在其他属性（如边框）上具有透明度。 不需要透明的PNG图像。
使用:before在CSS :before （或:after ），并给他们的不透明度的值离开原来的不透明度的元素。 因此，您可以使用：在创build人造元素之前，为其指定透明背景（或边框），然后将其移至要用z-index保持不透明的内容之后。
一个例子（ 小提琴 ）（请注意，与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; -kz-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 （使用值为零或任何更适合您的需求）。
问题是，在你的例子中，文本实际上是完全不透明的。 它在p标签内部具有完全的不透明性，但p标签只是半透明的。
你可以添加一个半透明的PNG背景图片，而不是在CSS中实现它，或者将文本和div单独分成2个元素，并将文本移到框上（例如，负边距）。
否则，这是不可能的。
编辑：
就像克里斯提到的：如果你使用透明的PNG文件，你必须使用JavaScript的解决方法，使其工作在麻烦的Internet Explorer中…
几乎所有这些答案都假设devise师需要纯色背景。 如果devise师真的想要一张照片作为背景，那么目前唯一真正的解决scheme就是像其他地方提到的jQuery Transify插件那样的JavaScript。
我们需要做的就是joinCSS工作组的讨论，让他们给我们一个背景不透明的属性！ 它应该与多背景function齐头并进。
以下是我如何做到这一点（它可能不是最佳的，但它的工作原理）：
创build你想要半透明的div 。 给它一个类/ ID。 保持空，并closures它。 给它一个高度和宽度（比如300像素×300像素）。 给它一个不透明的0.5或任何你喜欢的，背景颜色。
然后，直接在下面，创build一个不同的类/ ID另一个div。 在里面创build一个段落，在那里放置文字。 给出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>
这里是一个jQuery插件，将为您处理所有事情，Transify（ Transify – 一个jQuery插件，可以轻松地将透明度/不透明度应用到元素的背景 ）。
我偶尔遇到这个问题，于是我决定写一些让生活变得更容易的东西。 该脚本小于2 KB，它只需要1行代码来使其工作，并且它也将处理animation背景的不透明度，如果你喜欢。
不透明的背景，但不是文字有一些想法。 要么使用半透明的图像，要么叠加一个额外的元素。
前些时候，我在CSS中使用跨浏览器背景透明度写了这个。
奇怪的是，Internet Explorer 6将允许您使背景透明，并保持顶部的文本完全不透明。 对于其他浏览器，我build议使用透明的PNG文件。
背景色：RGBA（255,0,0,0.5）; 如上所述，简单地说就是最好的答案。 要说使用CSS3，即使在2013年也不是那么简单，因为来自不同浏览器的支持级别随着每次迭代而改变。
尽pipe所有主stream浏览器都支持background-color （不是CSS3的新增function）[1]，但alpha透明性可能会非常棘手，特别是在版本9之前的Internet Explorer和版本5.1之前的Safari上具有边框颜色的情况下。 [2]
使用类似Compass或SASS的东西确实可以帮助生产和跨平台兼容性。
[1] W3Schools：CSS背景色属性
[2] 诺曼博客：浏览器支持清单CSS3（2012年10月）
CSS3可以轻松解决您的问题。 使用：
background-color:rgba(0,255,0,0.5);
这里，rgba代表红色，绿色，蓝色和alpha值。 由于255获得绿色值，并且通过0.5α值获得半透明度。
如果你是一个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** }
您可以使用渐变语法通过（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="../resourceshttp://img.dovov.comloading_small.gif"> </div>
您可以使用纯CSS 3 ： rgba(red, green, blue, alpha) ，其中alpha是您想要的透明度级别。 不需要JavaScript或jQuery。
这里是一个例子：
#item-you-want-to-style{ background:rgba(192.233, 33, 0.5) }
如果您使用Less ，则可以使用fade(color, 30%) 。
为了使元素的背景半透明，但元素的内容（文本和图像）不透明。 您需要为该图像编写css代码，并且必须添加一个名为不透明度的属性，并使用最小值。 例如
.image{ position: relative; background-color: cyan; opacity: 0.7; }
//值越小，透明度越低，价值越低，透明度越高。
有一个更容易的解决scheme，把叠加在同一个div上的图像。 这不正确的使用这个工具。 但是像使用CSS制作覆盖的魅力一样。
使用像这样的插入阴影：
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
就这样 ：）
我通常使用这个类来工作。 它很不错。
.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ }
您可以在CSS中使用RGBA (red, green, blue, alpha) ，如下所示：
所以简单的做这样的事情就可以在你的情况下工作：
p { position: absolute; background-color: rgba(0, 255, 0, 0.6); } span { color: white; }
你可以在RGB（63,245,0）中使用不透明度的RGB颜色，像这样的颜色代码（63,245,0,0.5），并添加不透明度，也可以添加RGBAreplaceRGB。 用于不透明
div{ background:rgba(63,245,0,0.5); }
