我很喜欢 Erik D. Kennedy 的《打造出色 UI 的 7 个法则（下）》。文中第 4 条规则是这样的：学会在图片上添加文字的方法。我觉得我们应该看一看里面的要点，编写代码实现一下，并关注所有提及的技术上的东西。

着色

图片需要深色，不能有太多的纵向对比边缘

图片由你来挑选，如果它的颜色不是特别深。你需要用图片编辑程序加深一下，或者使用 CSS 覆盖一层透明色。最整洁的方法或许是使用多层背景，但是做起来并不是轻而易举的。技巧在于使用一个不产生渐变的渐变（不会从一个颜色过渡到另一个颜色，是固定的）

虽然黑色覆盖层更为简单和通用，你会发现彩色覆盖层同样有效。

利用这种方法确实可以通过CSS的支持为任何你想着色的图片着色。

白色文本

需要白色文本–我敢保证你找不到干净简单的反例，真的，哪怕只有一个。

我发现这确实是真的，至少当你尝试着做到漂亮什么的。垃圾杂志一般会使用黄色。

整页图片

有一种情况，不可避免的在一张图片上添加文本，那就是使用背景图片进行了全屏填充。之前我们已经讲过如何做，最佳选择如下：

顺便讲一下，如果你想如上所示那样铺上满屏图片，同时又能滚动向下查看更多，就需要在页面顶部区域设置一个 100vh 单元的高度。

浏览器支持上会有所不同。你或许需要一个固定高度的备份方案，或者通过 JavaScript 实现。

框内文本

这个非常简单，也非常可靠。可以快速制作一个半透明的黑色长方形，然后加上白色文字。如果覆盖层足够不透明，你可以使用任意图片作为底层背景，而文字依旧非常清晰。

适用于任何纵向对比的颜色组合。

只有一行文字的情况下比较简单。但如果文字突破了这个边界，就相对复杂了。可以让标题 display:block，或许不如 inline 这样优雅。但使用 inline，你需要考虑换行周围的间距不会显得突兀。

我们之前讨论了这个。我认为 box-decoration-break 将归结为前进的道路:

模糊

有一种出奇的好方法可以让覆盖层文字更为清晰，那就是将底层图片部分模糊化。

有一种实现方式，让区域中的一部分沿用同样的背景，固定在相同的位置（fixed attachment 是一种方法），然后将其模糊化。

以上是在模糊区域添加了一个彩色条，但并不是必须的。只要模糊化到位，效果一样好：

就像 Erik 调用 scrim 来柔化图像的部分区域。

scrim 是一个摄影设备的部分，使光线柔和。现在也是一个柔化图像的视觉设计技术，通过柔化图像让覆盖文本更清晰。

Floor Fade（底部褪色）

floor fade是当你有一个图像，碰巧在底部逐渐走向黑色，而在它之上写有白色文本。

这也许是相当明显，因为我们一直使用渐变去着色，但是……

如果你组合使用一点文本阴影，你可能会侥幸得到少量的图像暗度

在结尾…

1.找到其他的方法和组合使用这些技术很有趣

2.我相信你会找到这些演示失效的浏览器。也许我们可以在评论中来讨论备用方案。