问题 如何使用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>

7336
2018-04-30 09:00


起源
遗憾的是，CSS3的目标是使用新的颜色模块来修复它，它允许您在声明颜色时指定alpha值。 w3.org/TR/css3-color - meandmycode
实际上，子元素的不透明性是 乘以 由父元素的不透明度，而不是被覆盖。所以例如如果 p不透明的是 .6 和 span不透明的是 .5 那么跨度中文本的真实不透明度将是 0.3。 - chharvey
猜猜是这样，但由于它是半透明的背景，你甚至不需要滤镜/不透明度： codepen.io/anon/pen/ksJug - Stijn Sanders
@chharvey如果定义，应该发生什么 opacity:.5 为父母和 opacity:2 对于子元素？ - Alexander
@亚历山大，我很高兴你问这个问题。在数学上，人们会怀疑孩子会回到1的不透明度。但是， opacity:2; 是 无效的CSS。的价值 opacity 属性 必须 在包容范围[0,1]内。 - chharvey

答案:

要么使用半透明 PNG 图像或使用CSS3：

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

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


2115
2017-07-13 20:51


是否可以用六角形颜色做到这一点？喜欢#fff？ - grm
@grm javascripter.net/faq/hextorgb.htm - kb.
@grm：W3C考虑引入#RRGGBBAA十六进制代码格式，但他们决定不（因各种原因），所以我们不能。 - outis
@grm用 上海社会科学院 您可以， background-color: rgba(#000, .5); - Jürgen Paul
@outis：好消息， #RRGGBBAA现在处于Color level 4。 - BoltClock♦

在Firefox 3和Safari 3中，您可以使用RGBA GeorgSchölly提到。

一个鲜为人知的技巧是您可以使用渐变过滤器在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-33 IE11 IE9 IE8


456
2018-04-30 20:42


这似乎在IE6和IE7中都很好用...谢谢！ - philfreo
但不是在IE8中。我尝试了新的-ms-filter语法，但它仍然不适合我:( - philfreo
这篇文章展示了如何在IE8中做到这一点：robertnyman.com/2010/01/11/... - Slapout
@philfreo：如果你将Sebastian代码的第一位改为“background：rgb（0,0,0）transparent;”它现在应该在IE8中工作。这让我困扰了一段时间！ - Tom Chantler
@AdrienBe - 我根据你的指示编辑了你的答案。不幸的是，我已经离开了这个特定Q＆A的顶空一段时间了，所以我现在不能添加到这个对话中。 - user664833

这是我能想到的最佳解决方案，而不是使用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>


97
2018-05-24 16:07


他说：“不将两个元素中的文本和背景分开。”无论如何，谢谢，这是一个很好的修复，并且很有用，但在某些情况下，您希望不透明元素是半透明元素的子元素。 - Rolf
我在另一个SO问题上回复了几乎相同，但添加了一个jsfiddle和屏幕截图样张（IE7 +），如果感兴趣，请看这里 stackoverflow.com/a/21984546/759452 - Adrien Be
@Gorkem Pacaci：确保不透明度属性是“真正的”跨浏览器，您可以使用CSSTRICKS的这段代码片段 css-tricks.com/snippets/css/cross-browser-opacity - Adrien Be
为什么不用像这样的伪元素呢 :after 并避免额外的加价？ - AndFisher

最好使用半透明的 .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');
}

54
2017-10-05 08:15


您可以使用 paint.net 也。 - Donny V.

对于简单的半透明背景颜色，上述解决方案（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> 标记为绝对标记，从a更改窗格 <p> 到了 <span> 并将所有这些包裹在绝对位置 <p> 标签。）

该技术相对于上面列出的类似技术的主要优点是窗格不必是指定的大小;如上所述，它将适合全宽（正常的块元素布局）并且仅与内容一样高。外部窗格元素的大小可以任意方式，只要它是矩形的（即内联块可以工作;普通的内联不会）。

此外，它为您提供了很多自由背景;你可以自由地在后面的元素中添加任何东西，并且它不会影响内容的流动（如果你想要多个全尺寸的子图层，只要确保它们也有位置：绝对，宽度/高度：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>而不是 <span>s来简化你的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 screenshot


51
2018-04-30 09:11


在什么情况下，人们不想为此使用CSS3？ - Burkely91
@ Burkely91如果你能在CSS3中做到，那就绝对使用它。但是CSS3背景不支持所有类型的内容，也不支持完全布局灵活性。由于独立重复的边缘和中心填充，上面的信封/字母示例很难用CSS3完成。另外，请记住，这个答案最初写于5年前，在CSS3支持普及之前。 - Slipp D. Thompson
@Igor Ivancha回滚你的变化。对不起，将缩进从我喜欢的表格（标签）更改为你的（2个空格）并不酷。您可能有充分的理由在日常代码项目中使用2空格缩进，但是为了在Web上进行演示，我相信标签具有明确的胜利 - 更深的缩进使得更容易识别层次结构的级别，并且它很远更容易可靠地将标签转换为空格，因此是所有读者的更兼容的形式。 - Slipp D. Thompson
@Igor Ivancha此外，看起来您通过美化器运行代码，将每个CSS选择器和属性放在自己的行上。我的例子是用有意的换行符和间隔来逻辑地分组，这些应该由读者一起理解 - 例如最 width: ＆ height: 属性共享一条线，因为它们是相同类型的构造，更好地理解为二维形状，而不是一对一维约束。此外，一些线条中包含了相当数量的线条，因为它的重复内容并不是非常重要的内容。 - Slipp D. Thompson
@Igor Ivancha逻辑组织，分组和样式对于编写理智，易懂的代码非常重要，就像编写各种文档一样。您所做的更改相当于进入某个帖子并删除所有段落中断，并在每个句子后面添加强制换行符。如果你想在自己的工作中成为那个愚蠢的迂腐，那么你可以自由地这样做。但请不要在其他人的工作中愚弄语义特征和表达。 - Slipp D. Thompson

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

DEMO

输出：

Background opacity with a pseudo element

相关代码：

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中 然后。


47
2018-01-14 00:14



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

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

我用的是方法 Internet Explorer 6中的透明PNG。

除此之外，

你可以伪造它 two side-by-side sibling elements  - 制作 一个半透明的， 然后 absolutely position the other over the top？


23
2018-04-30 09:14


我只需要一个简单的背景颜色，你建议我用这种颜色创建PNG大小？ 1x1将使渲染做很多工作，太多的像素使得这个PNG非常大（应该是压缩后的文件大小，但仍然渲染需要解压缩才能使用它）... - Stijn Sanders
我推荐像30px x 30px这样的东西，它在渲染时重复使用的内存少于1x1，并且仍然足够小以最小化带宽使用。 - Chris

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

使用 :before （要么 :after）在CSS中给它们不透明度值，使元素保持原始的不透明度。因此，您可以使用：before之前制作一个人造元素，并为其提供所需的透明背景（或边框），并将其移动到您想要保持不透明的内容之后 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 （使用零或任何更适合您需求的值）。


20
2018-01-26 16:36



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

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

否则就不可能。

编辑：

就像Chris提到的那样：如果你使用具有透明度的PNG文件，你必须使用JavaScript解决方法使其在讨厌的Internet Explorer中工作...


14
2017-10-25 13:55



热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来