使CSS中白色文本下方的背景变暗(Darken the background beneath white text in CSS)

使CSS中白色文本下方的背景变暗(Darken the background beneath white text in CSS)

我需要在卡片中显示多个图像，我想在它们上面写一些文字。 这些是用户上传的随机图片，可以是任何颜色。 顶部的白色文本不需要透明，如附带的小提琴所示。

这是一个例子小提琴 - http://jsfiddle.net/7dgpbLd8/1/

这是我在图像上添加灰色div的解决方案。 但是，文字在灰色背景上应始终为白色。 但这里也有影子。 知道如何隐藏实际的背景以便文本可读，这将非常棒。

I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.

This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/

This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.

最满意答案

遵循Lee的建议（尽管我建议添加一些填充），或者使用文字阴影， 就像这样 。

div { color: white; text-shadow: 0 1px black; }

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

span { color: white; text-shadow: 0 1px black; background: #333; /* For browsers that don't support RGBA */ background: rgba(0,0,0,0.18); padding: 4px 8px; }

你的文章的问题在于你设置了opacity 。 但是，当您降低不透明度时，不仅背景会发生变化，而且会发生其所有内容。 换句话说，文字在你的小提琴中也具有较低的不透明度。 在我上面提到的小提琴中，你没有这个问题，因为你使用rgba。 RGBA使用默认的RGB颜色表示，但是为该层添加了一个alpha层组件（即：不透明度）。 这意味着您可以添加（半）透明的颜色。

它的工作方式与不透明度相同，只需为颜色添加所需的值（比如0.8），并将其添加到默认的rgb值之后。 一个例子：白色的RGB是255,255,255 ，黑色的是0,0,0 。 如果你想要那些不透明度为0.8，则在后面加上0.8：分别为rgba(255,255,255,0.8)或rgba(0,0,0,0.8) 。 通过这样做，只有背景的不透明度会改变，而不是文字的不透明度。 有关示例，请参阅上面的链接 。

Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.

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> 
  
 
 
Or you can ever merge our two approaches.
 
 
 
  
  
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> 
  
 
 
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
 
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.