背景感知文本颜色

Posted 2023-03-06

【中文标题】背景感知文本颜色

【英文标题】：Background-aware text color

【发布时间】：2013-05-31 08:19:24

【问题描述】：

我有一个响应式网站，它有一个动态大小的背景图片，其中有一些暗区和亮区。在浏览器中，字体颜色被调整为与背景图像的颜色有很好的对比。

不幸的是，在响应式（移动）设计中，一些文本叠加在重新调整大小的背景图像的较暗部分上，文本可能很难阅读。有谁知道 jQuery 插件或技术可以让文本了解其背后的背景并相应地更改样式/颜色？

【问题讨论】：

为什么不根据css媒体查询改变文本颜色？

不错的话题，我希望有一些创造性的答案 - 也许是一个画布解决方案，用于计算文本后面像素的（sumerized）十六进制？

某种文本阴影或轮廓可能会解决您在较大文本上的问题。否则我会选择不透明的背景

【参考方案1】：

您可以使用 text-shadow 标记文本的边缘。

body 
/* your rules */
color: rgba(0 , 0, 0, 0.8 ); /* just a guess that it might be black;*/
text-shadow: 
    0 0 1px gold, 
    0 0 3px white; /* choose how many and which colors */

就是这样

【参考方案2】：

你要问的基本上是这样的：

将文本中的每个单词分配给<span> 使用 % position from top/left 来获取图片中的位置，并动态地为该区域内的 span 分配颜色。

找不到更好的词，不要。这很荒谬，而且开销太大而无法合理化。

为什么不给文本容器一个半透明的背景，让它更加突出呢？

.Container 
     background-color:rgba(0,0,0,0.5);

这为文本提供了一种浅色调，使其与图像弹出，同时仍让整个图像显示在页面上。

text-shadow 解决方案也是一个好主意，但请注意，它不适用于 IE9-。我的解决方案适用于 IE9，但不适用于 IE8-，这并不意味着它更好，只是需要牢记。