我怎样才能让任何颜色的字体可读？
假设我有一套必须保持的字体颜色，并且它覆盖了可以是任何颜色的内容，那么如何确保字体无论覆盖哪个字体都可读？
这里是一个jsFiddle来演示我试图描述的效果。 http://jsfiddle.net/4AUDr/
#overlay
{
position: relative;
top: -150px;
color: #860101;
}
Meme字幕使用带黑色轮廓的白色文字，以使其可以在任何假想的模板图像上阅读，但我认为不存在实现该功能的跨浏览器兼容CSS方法，并且对于较小的字体可能看起来相当可怕。
这个问题有什么解决方案？
您可以尝试使用text-shadow属性（MDN doc），例如：
text-shadow: white 0px 0px 10px;
（的jsfiddle）
它在IE10中得到了支持。 对于IE9，您可以根据此答案使用专有的Internet Explorer筛选器。
虽然文字阴影很好，但实际上并没有给出你想要的结果。 一个影子是一个影子，你需要对大部分可读文本有一个“文本边界”。 不幸。 在CSS中没有像text-border这样的东西，但我们可以制作一个！
我对有多少不受欢迎的多重阴影感到惊讶。 这是一个多重阴影可以创造奇迹的例子：
CSS
p {
color: white;
font-size: 20px;
text-shadow:
0.07em 0 black,
0 0.07em black,
-0.07em 0 black,
0 -0.07em black;
}
这种风格只会在文本周围（上，下，左，右）添加一层薄薄的阴影（与实际字体大小的7％一样薄）。
但是四个阴影足够了吗？ 也许你可以用八个获得更好的结果？ 看起来答案是肯定的，对我来说是有道理的，但也可能是我们在这里过分夸大了事情。 请注意，在这种情况下，我也减少了每个阴影的大小：
CSS
p.with-eight {
text-shadow:
0.05em 0 black,
0 0.05em black,
-0.05em 0 black,
0 -0.05em black,
-0.05em -0.05em black,
-0.05em 0.05em black,
0.05em -0.05em black,
0.05em 0.05em black;
}
然后在白色背景下的这个标记中，您有一个很好的可读文本：
HTML
<html>
<body>
<p>This text is readable on any background.</p>
<p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>
JSFiddle的例子在这里
您可以使用css3属性text-shadow
警告：浏览器兼容性问题（IE9不支持）
http://caniuse.com/css-textshadow
一个简单的例子：
.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
http://jsfiddle.net/H4JtR/
如果您对黑色字体使用白色阴影，反之亦然，无论叠加什么内容，您的文本都可以读取。
另一种选择是使用具有透明度的background-color （您可能希望将其应用于内联元素，如span或p而不是div因为background-color即将应用于整个div区域，即使没有文本）
background: rgba(33, 33, 33, .9);
http://jsfiddle.net/LSRkE/
只需使用与您的字体颜色形成鲜明对比的透明度即可。 然后，您可以降低alpha-channel值，以便背景图像足够可见。
相关的答案在这里https://stackoverflow.com/a/5135033/953684
链接地址: http://www.djcxy.com/p/89349.html