深夜12点，头秃的那家伙，还在用 CSS 处理图片上的文字

做者：Ahmad shaded
译者：前端小智
来源：sitepoint

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

作项目过程当中，咱们可能会遇到这样的一个组件，该组件的图像上方是文本。 在某些状况下，根据所使用的图像，文字难以阅读，如文字是白色的，背景图偏浅。

这种状况有一些不一样的解决方案，例如添加渐变叠加或着色的背景图像，文本阴影等。

简介

每一个解决方案都应该解决一个问题。 咱们来探讨本案的问题。 在设计图像上方有文字的组件时，咱们须要注意使文字必须易于阅读的。

注意上图上，没有渐变覆盖的版本几乎不可读，这是对用户不利。 为了解决这个问题，咱们须要在文本下方添加一个图层，便于阅读。 添加图层也有要注意的地方。由于，不少解决方案中没有考虑到可访问性。

多种解决方案

有多种解决方案可使文本更易于阅读。 咱们逐一看看。

如上图所示，针对此问题有不一样的解决方案。 须要注意的是渐变的解决方案。 为何？ 由于这种方案容易让文本失去能够访问性。

解决方案

The Gradient Overlay(渐变叠加)

通常而言，渐变叠加是让图像上的文字更加清晰的最多见解决方案，因此，咱们重点来看看。

实现渐变叠加时，有两种方式：

1. 使用单独的元素进行渐变（伪元素或空的<div>）
2. 应用渐变做为背景图像。

以上每一种方法都有其优势和缺点，咱们一块儿来看看。

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

乍一看，你可能会认为渐变效果很好，这是不够全面的。若是用更多样的图片测试了一样的渐变效果，结果以下：

白色文本和图像之间的对比度并不老是很清晰。 对于某些人来讲，能够接受，可是使用这种渐变是一个巨大的错误，由于文字没法访问。

缘由是该渐变在垂直方向上应覆盖更多的空间，所以它的高度须要更大。 渐变等于内容的大小在全部状况下都没法使用。 为了解决这个问题，咱们可使用min-height，以下所示：

• .card__content元素的min-height。
• Flexbox 将内容推到底部。

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

另外一种解决方案是仅使用padding-top 来代替min-height和flexbox。

.card__content {
  position: absolute;
  padding-top: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

请注意左卡和右卡之间的差别，渐变高度较大。

那看起来不错，咱们能够作得更好吗？ 固然是！

缓渐变

若是仔细观察，咱们会发现渐变结束的地方很突兀，这家就是所谓的硬边现象。

为了使它更好，咱们能够将缓动概念应用于渐变。 这样一来，渐变将显得更加天然，而且在渐变结束时也不会注意到硬边。

在CSS中，咱们须要有多个渐变中止点来实现缓动，由于在撰写本文时尚未原生的方法能够作到这一点。 好消息是CSS工做组正在讨论在CSS渐变中实施缓动的可能性，但什么时候实现尚不明确。

值得庆幸的是，Andreas Larsen先生建立了一个方便的PostCSS和Sketch插件，可将正常渐变转换为简化的渐变。

这是上面例子的CSS渐变：

.card__content {
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 35.29%, 0) 0%,
    hsla(0, 0%, 34.53%, 0.034375) 16.36%,
    hsla(0, 0%, 32.42%, 0.125) 33.34%,
    hsla(0, 0%, 29.18%, 0.253125) 50.1%,
    hsla(0, 0%, 24.96%, 0.4) 65.75%,
    hsla(0, 0%, 19.85%, 0.546875) 79.43%,
    hsla(0, 0%, 13.95%, 0.675) 90.28%,
    hsla(0, 0%, 7.32%, 0.765625) 97.43%,
    hsla(0, 0%, 0%, 0.8) 100%
  );
}

水平渐变

处理图片上的文字不只能够是垂直的，咱们还能够将它们用做水平渐变。 像下面这种状况，它须要一个水平渐变。

![上传中...]()

这是上面的CSS渐变,我使用了前面提到的工具来生成缓和的渐变。

background: linear-gradient(
  to right,
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.964) 7.4%,
  hsla(0, 0%, 0%, 0.918) 15.3%,
  hsla(0, 0%, 0%, 0.862) 23.4%,
  hsla(0, 0%, 0%, 0.799) 31.6%,
  hsla(0, 0%, 0%, 0.73) 39.9%,
  hsla(0, 0%, 0%, 0.655) 48.2%,
  hsla(0, 0%, 0%, 0.577) 56.2%,
  hsla(0, 0%, 0%, 0.497) 64%,
  hsla(0, 0%, 0%, 0.417) 71.3%,
  hsla(0, 0%, 0%, 0.337) 78.1%,
  hsla(0, 0%, 0%, 0.259) 84.2%,
  hsla(0, 0%, 0%, 0.186) 89.6%,
  hsla(0, 0%, 0%, 0.117) 94.1%,
  hsla(0, 0%, 0%, 0.054) 97.6%,
  hsla(0, 0%, 0%, 0) 100%
);

混合纯色和渐变

这里从Netflix网站了解了这种模式。 在未登陆用户的主页上，有一个带有大背景图像的标题。

我喜欢它，可是它隐藏了不少图像细节。 确保仅在图像具备装饰性时才使用此功能。

<div class="hero">
  <img src="cover.jpg" alt="" />
  <div class="hero__content">
    <h2>Unlimited movies, TV shows, and more.</h2>
    <p>Watch anywhere. Cancel anytime.</p>
  </div>
</div>```
<div class="hero">
  <img src="cover.jpg" alt="" />
  <div class="hero__content">
    <h2>Unlimited movies, TV shows, and more.</h2>
    <p>Watch anywhere. Cancel anytime.</p>
  </div>
</div>

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

下面是拆解过程。

渐变叠加和文本阴影

有一个颇有用的小技巧，可让文字比图像更好。就是使用 text-shadow，这可能不容易注意到，但在图像没法加载的状况下，这是很是有用的。

看下面的例子：

.whatever-text {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

渐变叠加，文本阴影和不透明度

这是在Facebook的视频播放器上注意到的模式。 他们使用多种技术来使文本（和其余UI元素）清晰可见。 与视频播放器打交道时，确保其上方的元素应引人注目很是重要。

.player__icon {
  opacity: 0.9;
}

.player__time {
  color: #fff;
  text-shadow: 0 0 5px #fff;
}

播放图标为opacity: 0.9。 这有助于使它们与下面的背景融为一体。 给人一种感受：控件是混合在一块儿的。

此外，在白色文本中使用白色文本阴影是使文本更清晰的有效方法。你是否想要证实，即便背景是彻底白色的图像，上面的方法也能够工做?给你。

YouTube也对他们的视频作相似的事情。

径向渐变

我从Netflix了解到的一个有趣的解决方案是使用径向渐变。 下面是它的工做原理：

1.设置底色背景颜色。

1. 将图像以75%的宽度放置到右上角。
2. 覆盖层等于图像的大小和位置。

.hero {
  background-color: #000;
  min-height: 300px;
}

.hero__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  object-fit: cover;
}

.hero:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  background: radial-gradient(
    ellipse 100% 100% at right center,
    transparent 80%,
    #000
  );
}

不过，Netflix团队使用了一张图像做为覆盖层。这里不能肯定缘由，多是一个跨浏览器的问题或其余东西。

选择可访问的覆盖颜色

这是一个很棒的工具，能够帮助咱们根据图像选择正确的叠加不透明度。

通常而言，若是你确保渐变叠加层能够正确填充文本，而且具备不错的色彩对比，那就能够了。

测试

解决方案要通过测试，才能被认为是好的，对吧？ 我用来测试渐变叠加层的一种方法是在其下方添加白色背景。 若是文本可读，则渐变将适用于咱们使用的任何图像。 若是没有，则须要进行调整和加强。

在上面的例子中，我选择了标题下的纯色，对比度是4.74，这样比较好。

~完，我是刷碗智，咱们下期见！

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://ishadeed.com/article/...

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。