叠加在图像上时，使文本显示为白色，具有半透明的黑色背景

Posted 2023-03-05

【中文标题】叠加在图像上时，使文本显示为白色，具有半透明的黑色背景

【英文标题】：Make Text Appear White With Semi-Transparent Black Background When Superimposed on an Img

【发布时间】：2011-10-19 14:31:38

【问题描述】：

我有一个简单的 CSS/html 问题。我在 div 中有一张图片和一些文字。我已经使用 z-index 将文本定位在图像顶部。

文本是黑色背景的白色。我调整了文本的 div 的不透明度，使其下方的图像可见。这看起来不错的样子。

问题是文本显示为灰色而不是白色，因为不透明度降低了。如何使文本显示为白色，并且周围仍然有半透明的黑色背景？

 <style type="text/css">

        .wrap 
          position:relative;
          float:left;
          clear:none;
          overflow:hidden;
        

        .wrap img 
          position:relative;
          z-index:1;
        

        .wrap .desc 
          display:block;
      position:absolute;
      width:166px;
      top:20px;
      left:20px;
      z-index:2;
      color: #FFFFFF;
      padding: 10px;
      background-color: #000000;
      border-radius: 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;

     /*For IE*/
      filter: alpha(opacity=60);
      opacity: 0.60;

        
    </style>

    <div class="wrap">
        <img src="path/to/pic.png" />
        <h6 class="desc">This is my text about my image</h3>

    </div>

有什么建议吗？

【参考方案1】：

您可以在元素的背景中放置半透明图像。实际图像可能非常小，您可以重复它以覆盖整个背景。

.wrap .desc 
      display: block;
      position: absolute;
      width: 166px;
      top: 20px;
      left: 20px;
      z-index: 2;
      color: #FFFFFF;
      padding: 10px;
      background: url('my-small-bg.png');
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;

这是一个示例：http://jsfiddle.net/f6XS6/1/

【讨论】：

您好 g_thom，感谢您的留言。恐怕我的问题不够清楚。图像很大，我无法平铺它。这是一个人在活动中的照片。谢谢。

Laxmidi，“my-small-bg.png”图像是您的文字描述背景中的半透明 png。见jsfiddle.net/f6XS6/1

@bozdoz，如果需要 IE6 支持，那么透明 png 只能通过 pngfix hack 实现。

类似的东西。在大多数情况下，我发现将每个 png 标记为 class="png" 很容易，然后我相信 .png background:inherit 效果很好；如果没有，那么我可以替换图像后面的任何背景颜色。不过我同意；我不得不处理这个问题几次，使用 IE6 可能会加重。

这是一个不错的技巧。我会检查一下。幸运的是，我们的支持合同规定 IE7 是支持的最低浏览器，除非特别要求！

【参考方案2】：

根据您的浏览器支持要求，您可以将不透明度设置为 100%，并使用rgba 颜色：

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

颜色为红色、绿色、蓝色（每种 0-255），后跟 Alpha (0-1.0)。

如果您需要在旧浏览器中回退，您通常可以使用：

background-color: #000;
background-color: rgba(0,0,0,0.5);

对于旧浏览器默认为黑色，对于新浏览器默认为半透明。它避免了额外下载（平铺图像），并在文本文件中保留了更多样式（更易于版本、维护和查找）。

【讨论】：

非常酷。我以前没有用过，但它有效。不过，我不确定可维护性，因为它不适用于 IE8 及更低版本，并且需要 IE 过滤器用于 IE8 及更低版本 (css-tricks.com/2151-rgba-browser-support)。

您好 OverZealous，谢谢您的建议。我从未使用过 rgba，但它看起来很酷。不幸的是，我认为我需要更广泛的浏览器支持，所以这么新的东西对我来说可能不是最好的解决方案。谢谢。

Laxmidi - 我不会放弃这个选项，因为 IE 过滤器并不复杂（如果这是唯一的缺点的话）

使用 IE 过滤器的一个担心是它们会让一切看起来很糟糕。 （例如：没有抗锯齿。）只是一个想法。

我想这里的每个解决方案都有其缺点，但我确实喜欢你的。至少我学到了一些东西。

【参考方案3】：

这样怎么样：

CSS

.mod 
  position: relative;
  width: 80px;
  height: 100px;
  padding: 5px;

.mod-text,
.mod-background 
  position: absolute;
  left: 0;
  width: 100%;

.mod-text 
  color: #FFF;
  font-size: 1em;
  text-align: center;
  bottom: 0;

.mod-background 
  background-color: #f58322;
  border-radius: 8px;
  filter: alpha(opacity=60);
  opacity: 0.60;
  top: 0;
  height: 100%;

HTML

<div class="mod">
  <img src="http://www.gravatar.com/avatar/d543f6789b58df56f6fed95291e78261.png" />
  <div class="mod-background">
    &nbsp;
  </div>
  <div class="mod-text">
    Hawt!
  </div>
</div>

Plnkr

http://plnkr.co/edit/aSd9rO?p=preview

【讨论】：

我觉得把图片放在背景前面放在文字前面比较容易；那么您不需要包含 z-indexes。供参考。不过应该可以。

嗨，Beez，非常感谢您的解决方案。这很好用。我很高兴有这么多人也提出了很好的建议。

我知道这是旧的，但我不喜欢我使用 id 进行样式设置。我不想延续不良做法，所以我更新了它（并赋予它一点天赋）。

【参考方案4】：

我会在描述之前创建另一个具有相同高度和宽度的 div，将该 div 的不透明度设置为透明，添加背景，然后将描述放入另一个没有背景的 div。如果他们都有绝对位置，那么后者应该在前者之上。

在此处查看demo。

【讨论】：

你的演示和我的唯一区别是大小，你没有包装器。如果 OP 在页面上的元素多于这些元素，则将需要它。我错过了什么吗？

你可能更正确。我只是想表明它可以在内容 div 之前与背景 div 一起使用。我加了你；很多，因为我们的答案是相同的，因为你的答案更完整。我不确定他是否需要包装纸的宽度和高度；更重要的是拥有图像的高度和宽度（即在您的情况下为 300 和 300），以便浏览器在加载之前知道要给它多少空间。不过干得好；你比我早半小时回答。 :)

我的竞争天性说“注意自己”。但实际上，这并不重要。只要他得到答案并且至少有人从这个问题中学习，我想这才是真正重要的。绝对是您在那里使用的好网站。我总是在我的桌面上保留一个 html 文件，我用它来测试这样的小东西。那个网站不错。

@Bozdoz，谢谢你的建议。我很感激帮助。我是个幸运的人，我有很多工作机会！谢谢。