gpt4 book ai didi

html - CSS - 如何使字体在任何颜色上都可读?

转载 作者:技术小花猫 更新时间:2023-10-29 12:17:57 24 4
gpt4 key购买 nike

假设我有一个必须维护的设置字体颜色,并且它覆盖可以是任何颜色的内容,我如何确保无论覆盖什么字体都可读?

这是一个 jsFiddle 来演示我试图描述的效果。 http://jsfiddle.net/4AUDr/

#overlay 
{
position: relative;
top: -150px;
color: #860101;
}

Meme 标题使用带有黑色轮廓的白色文本,使其在任何假设的 meme 图像上都可读,但是我认为没有跨浏览器兼容的 CSS 唯一方法来实现这一点,并且它可能看起来非常可怕较小的字体。

这个问题有什么解决方案?

最佳答案

虽然 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%)。

但是四个影子就够了吗?也许你可以用 8 得到更好的结果?看起来答案是肯定的,对我来说很有意义,但也可能是我们在这里过度杀伤了东西。请注意,在这种情况下,我还减小了每个阴影的大小:

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 example here

关于html - CSS - 如何使字体在任何颜色上都可读?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23968961/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com