假设我有一个必须保持的设置字体颜色,并且它覆盖了可以是任何颜色的内容,我怎样才能确保字体是否可读,无论它覆盖什么？
这是一个jsFiddle来展示我试图描述的效果. http://jsfiddle.net/4AUDr/
#overlay
{
position: relative;
top: -150px;
color: #860101;
}
Meme字幕使用带有黑色轮廓的白色文本使其在任何假设的meme图像上都可读,但是我不认为有一种跨浏览器兼容的CSS方法可以实现这一点,并且使用较小的字体可能看起来非常可怕.
这个问题有什么解决方案？
Geo*_*dis 15
虽然text-shadow很好,但它实际上并没有给出你想要的结果.阴影是阴影,大多数可读文本需要的是"文本边框".不幸.在CSS中没有文本边框这样的东西,但我们可以制作一个!
多少阴影不受欢迎我感到惊讶.这是一个通过多个阴影你可以创造奇迹的情况:
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>
kam*_*uel 14
您可以尝试使用text-shadow属性(MDN doc),例如:
text-shadow: white 0px 0px 10px;
(jsFiddle)
它在IE10中得到支持.对于IE9,您可以根据此答案使用专有的Internet Explorer过滤器.
您可以使用css3属性 text-shadow
警告:浏览器兼容性问题(IE9不支持)
http://caniuse.com/css-textshadow
一个简单的例子:
.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
如果您使用白色阴影而不是黑色字体,反之亦然,无论覆盖什么,您的文本都是可读的.
另一种选择是使用background-color带透明度的(你可能希望将它应用于内联元素,如a span或a p而不是a,div因为background-color即使在没有文本的情况下也会应用于整个div区域)
background: rgba(33, 33, 33, .9);
只需使用与您的字体颜色形成对比的透明度.然后,您可以降低该alpha-channel值,以便从背景中的图像足够可见.