把文本放在图片之上的几种方法

我很喜欢 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.我相信你会找到这些演示失效的浏览器。也许我们可以在评论中来讨论备用方案。

1 收藏 评论

关于作者:cucr

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部