关于javascript:深夜12点头秃的那家伙还在用-CSS-处理图片上的文字

作者：Ahmad shaded
译者：前端小智
起源：sitepoint

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588… 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送 Star 和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。

做我的项目过程中，咱们可能会遇到这样的一个组件，该组件的图像上方是文本。在某些状况下，依据所应用的图像，文字难以浏览，如文字是红色的，背景图偏浅。

这种状况有一些不同的解决方案，例如增加突变叠加或着色的背景图像，文本暗影等。

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

留神上图上，没有突变笼罩的版本简直不可读，这是对用户不利。为了解决这个问题，咱们须要在文本下方增加一个图层，便于浏览。增加图层也有要留神的中央。因为，很多解决方案中没有思考到可拜访性。

有多种解决方案能够使文本更易于浏览。咱们逐个看看。

如上图所示，针对此问题有不同的解决方案。须要留神的是 突变的解决方案。为什么？因为这种计划容易让文本失去能够拜访性。

一般而言，突变叠加是让图像上的文字更加清晰的最常见解决方案，所以，咱们重点来看看。

实现突变叠加时，有两种形式：

应用独自的元素进行突变（伪元素或空的<div>）
利用突变作为背景图像。

以上每一种办法都有其长处和毛病，咱们一起来看看。

.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. 设置底色背景色彩。

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

.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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

关于javascript:深夜12点头秃的那家伙还在用-CSS-处理图片上的文字

简介

多种解决方案

解决方案

The Gradient Overlay(突变叠加)

缓突变

程度突变

混合纯色和突变

突变叠加和文本暗影

突变叠加，文本暗影和不透明度

径向突变

抉择可拜访的笼罩色彩

测试

交换