设计考量：图像上的文本

我喜欢 Erik D. Kennedy 的文章 创建精美 UI 的 7 条规则（第 2 部分）。其中，他的规则 4 是：学习将文本叠加在图像上的方法。我认为我们可以看一下他的所有要点，用代码实现它们，并记录任何技术问题。

着色

图像应为深色，并且没有太多对比度强的边缘。

选择图像取决于您，但假设它不是特别暗。您可以使用图像编辑程序将其变暗，或者使用 CSS 叠加透明颜色。也许最干净的方法是使用多个背景，但这 并不是很明显如何实现。诀窍是使用不渐变化的渐变（不会从一种颜色逐渐过渡到另一种颜色，只是纯色）。

.darken {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(shoes.jpg);
}

查看 CodePen 上的示例 使用多个背景使图像变暗，由 Chris Coyier (@chriscoyier) 创建。

虽然黑色叠加最简单且最通用，但您当然也可以找到彩色叠加。

事实上，使用这种方法，您可以从 CSS 的舒适区域中随意进行着色。

查看 CodePen 上的示例 使用多个背景使图像变暗，由 Chris Coyier (@chriscoyier) 创建。

白色文本

文本必须是白色 - 我敢你找到一个干净且简单的反例。真的。只有一个。

我发现这一点也是正确的，至少在试图保持优雅时是这样。垃圾杂志倾向于 使用黄色。

查看 CodePen 上的示例 myPMGB，由 Chris Coyier (@chriscoyier) 创建。

全页面图像

将文本放在图像上的一个不可避免的方式是，当您将整个屏幕填充为背景图像时。 我们之前已经介绍了如何实现这一点，最佳做法是

body {
  background: /* do whatever tinting and stuff here */;

  /* This will ensure everywhere is covered */
  background-size: cover;
}

查看 CodePen 上的示例 zxqdev，由 Chris Coyier (@chriscoyier) 创建。

顺便说一句，如果您想像这样覆盖整个屏幕，然后能够向下滚动以获取更多内容，您可以将顶部区域设置为具有 height 为 100vh 单位。

查看 CodePen 上的示例 myPMvp，由 Chris Coyier (@chriscoyier) 创建。

浏览器支持略有不同。您可能需要使用固定高度的备用方案，或者使用 JavaScript 来实现。

文本框

这非常简单且非常可靠。制作一个略透明的黑色矩形，然后涂上一些白色文本。如果叠加层足够不透明，您可以在下面使用几乎任何图像，文本仍然完全清晰可见。

适用于任何对比度强的颜色组合。

查看 CodePen 上的示例 使用多个背景使图像变暗，由 Chris Coyier (@chriscoyier) 创建。

对于单行文本，这很容易。但如果文本有任何换行的可能性，它就更难了。您可以将标题保留为 display: block;，但它可能不如 inline 优雅。但是对于内联，您需要确保换行符周围的间距不显得笨拙。

我们之前已经介绍过这一点。我认为 box-decoration-break 是未来的方向。

.title { 
  background-color: black;
  color: #fff; 
  display: inline;
  padding: 0.5rem;
  
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

查看 CodePen 上的示例 使用 box-decoration-break 进行多行填充，由 Chris Coyier (@chriscoyier) 创建。

模糊

一种非常有效的方法是模糊一部分底层图像，使叠加文本清晰可见。

一种方法是让该区域的一部分继承相同的背景，将其定位到相同的位置（固定附件是一种方法），然后对其进行模糊。

.module {
  background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-attachment: fixed;
  overflow: hidden;
}
.module > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
}
.module > header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(12px);
  filter: blur(12px);
}

查看 CodePen 上的示例 yyOodm，由 Chris Coyier (@chriscoyier) 创建。

这使用了色条以及模糊，但您并不一定要使用它。您可以将其模糊到足以使其正常工作。

查看 CodePen 上的示例 ZYWXEY，由 Chris Coyier (@chriscoyier) 创建。

Erik 将像这样仅软化图像的一部分称为遮罩。

遮罩是一种摄影器材，可以使光线更柔和。现在它也是一种视觉设计技巧，用于软化图像，使叠加文本更清晰可见。

底部渐变

底部渐变是指您有一个图像，该图像在底部微妙地向黑色渐变，然后在其上写有白色文本。

这可能非常明显，因为我们一直在使用渐变进行着色，但是…

.module {
  background: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.6)
    ),
    url(skyscrapers.jpg);
}

查看 CodePen 上的示例 ByKwaq，由 Chris Coyier (@chriscoyier) 创建。

如果您将其与一些文本阴影相结合，您可能会使用更少的图像黑暗度。

.title {
 text-shadow: 0 1px 0 black;
}

---

最后…

1. 找到其他方法并尝试结合这些技巧非常有趣。
2. 我相信您会发现这些演示在某些浏览器中无法正常工作。也许我们可以使用评论区讨论备用方案。