javascript - 根据背景图像更改字体颜色

Question

例如，在 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 上看到的那样“数星星”不可读，所以我想更改文本的颜色。我正在使用color-thief.js获取图像的主色，但如何将其与背景图像一起使用？

Answer 1

即使您可以从图像中获取颜色，也有一些图像既不可读也不可读。

我建议你在文本周围放置一个淡淡的阴影，这样即使背景是白色也可以阅读，并且当背景是黑色时它不会对背景产生太大影响。示例:

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

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

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