html - 使 CSS 中白色文本下方的背景变暗

Question

我有在卡片中显示多个图像的要求，我想在它们上面写一些文字。这些是用户上传的随机图片，因此可以是任何颜色。需要它们上面的白色文本不透明，如附加的 fiddle 所示。

这是一个示例 fiddle - http://jsfiddle.net/7dgpbLd8/1/

这是我在图像上添加一些灰色 div 的解决方案。但是，文本应该始终是灰色背景上的白色。但它也被遮蔽在这里。如果知道如何为实际背景添加阴影以便文本可读，那就太好了。

Answer 1

要么听从 Lee 的建议(尽管我建议添加一些填充)，要么像这样使用文本阴影。

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
  color: white;
  text-shadow: 0 1px black;
}

.dark {
  background: #333;
}

.light {
  background: #ccc;
}

<div class="dark">Some text</div>
<div class="light">Some text</div>

或者您可以合并我们的两种方法。

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}

.dark {
  background: #333;
}

.light {
  background: #ccc;
}

span {
  color: white;
  text-shadow: 0 1px black;
  background: #333;
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 8px;
}

<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>

您帖子的问题在于您设置了不透明度。但是，当您降低不透明度时，不仅背景会发生变化，其所有内容也会发生变化。换句话说，文本在您的 fiddle 中的不透明度也较低。在我的 fiddle 中，如上所示，你没有这个问题，因为你使用了 rgba。 RGBA 使用默认的 RGB 颜色表示，但向其添加了一个 alpha 层组件(即:不透明度)。这意味着您可以添加一种(半)透明的颜色。

它的工作方式与不透明度相同，只需添加您想要的颜色值(假设为 0.8)，然后将其添加到默认 rgb 值之后。示例:白色的 RGB 是 255,255,255，黑色的 RGB 0,0,0。如果您希望它们的不透明度为 0.8，请在后面分别添加 0.8:rgba(255,255,255,0.8) 或 rgba(0,0,0,0.8)。通过这样做，只有背景的不透明度会改变，而不是文本的不透明度。有关示例，请参见上面的示例。