Text Over Image 的无奈设计

在
Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)
和
17 Tips for Designing with Type on a Photo

等文章中都提到了很多 Text Over Image 的设计注意事项。

问题是很多时候，文字背后的图片是不受控制的，它可能是编辑任意插入的一张，在文字的位置可能深可能浅。

客户就要这种，别谈美观了，先让文字能看清吧，下面是些无奈的思路：

1，使用混合模式

mix-blend-mode: difference;

在悬浮 Header 上使用这个 CSS 属性，可以让文字自动和背景色差异显示。

示例

未使用 mix-blend-mod: difference;

使用 mix-blend-mod: difference;

2，使用 text -shadow

示例

使用

text-shadow: 3px 3px 0 #df5e41;

3，使用渐变色

这招是看到上面的 SmashingMagazine 深色模式的渐变想到的。
在 Firefox 中，设置 Settings -> General -> Language and Appearance -> Website appearance -> Dark 即可看到

它的 CSS 样式是这样的：

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(-90deg,#adfbda 0,#35c3ff 30%,#fda399 50%,#76d880 70%,#ebf38b 90%,#adfbda 100%);