jquery - 背景感知文本颜色

Question

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

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

Answer 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 */
}

这就是想法

Answer 2

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

• 指定要换行的文本中的每个单词<span>
• 使用 % position from top/left 来获取图片中的位置，并动态地将颜色分配给落在该区域的跨度。

由于没有更好的词，不要。这很荒谬，而且开销太大而无法合理化。

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

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

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

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