使CSS中白色文本下方的背景变暗
我有要求在卡片上显示多个图像，我想写一些文字在他们身上。 这些是用户上传的随机图片，可以是任何颜色。 顶部的白色文本不需要透明，如附带的小提琴所示。
这是一个例子小提琴 - http://jsfiddle.net/7dgpbLd8/1/
这是我在图像上添加灰色div的解决方案。 但是，文字在灰色背景上应始终为白色。 但这里也有影子。 知道如何隐藏实际的背景以便文本可读，这将非常棒。
遵循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) 。 通过这样做，只有背景的不透明度会改变，而不是文字的不透明度。 有关示例，请参阅上面的链接。
我会将图像放入深色背景的div中，然后降低图像本身的不透明度，使图像变暗以便可以读取文本。 通过这种方式，您还可以将光标上的图像变暗以提高可读性。
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
我会在你的位置使用文字阴影，但是我会尝试使用多个阴影，直到达到最佳解决方案。 例如：
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
小提琴
链接地址: http://www.djcxy.com/p/89351.html