根据背景图像更改字体颜色答案

【问题标题】：Change font color on the basis of a background image根据背景图像更改字体颜色
【发布时间】：2014-06-14 09:57:26
【问题描述】：

例如，在 iPhone 上，如果手机壁纸上的白色不可读，图标标签的颜色会从白色变为黑色。好吧，如果可能的话，我想用 Javascript 重现它。

我有这个 HTML：

<div style="background-image: url(http://just5.net/wp-content/uploads/2014/05/OneRepublic-Counting-Stars.jpg)">
    <span style="color: white;">Counting Stars</span>
</div>

正如您在this fiddle 上看到的那样，“Counting Stars”不可读，所以我想更改文本的颜色。我正在使用color-thief.js 来获取图像的主色，但是如何将它与背景图像一起使用？

【问题讨论】：

好吧，使用该插件，您只需将图像传递给插件，因此，您应该从背景属性中获取 uri。无论如何，如果您知道要使用哪些图像，则可以使用图像 uri 和要使用的颜色填充对象
问题是我不知道要使用哪些图片...
正如我所说，使用该插件，您只需将图像 src 传递给插件。这意味着，对于每个图像（带有“x”类），调用插件并获得响应以应用于最接近的“y”元素。或者类似的东西:)我忘记了你可以反转从插件获得的颜色

标签： javascript html colors background

【解决方案1】：

即使您可以从图像中获得颜色，也有一些图像无法读取黑色和白色。

我建议你在文字周围加上一个微弱的阴影，这样即使在背景是白色的情况下也可以阅读，并且在黑暗的情况下不会对背景造成太大影响。示例：

text-shadow: rgba(0,0,0,0.5) 0 0 2px;

演示：http://jsfiddle.net/2WQJA/1/

您可以尝试不同的不透明度（示例中的0.5）和半径（示例中的2px）。

【讨论】：

【解决方案2】：

我不认为任何这样的方法是可能的，无论如何你可以做一件事，你可以将图像放在一个数组中，然后通过循环为其分配字体颜色值。

【讨论】：