css处理图片上的文字(内阴影)

css处理图片上的文字(内阴影)

做项目过程中，我们可能会遇到这样的一个组件，该组件的图像上方是文本。 在某些情况下，根据所使用的图像，文字难以阅读，如文字是白色的，背景图偏浅。
这种情况有一些不同的解决方案，例如添加渐变叠加或着色的背景图像，文本阴影等。

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

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

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

如上图所示，针对此问题有不同的解决方案。 需要注意的是渐变的解决方案。 为什么？ 因为这种方案容易让文本失去可以访问性。

解决方案
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);
}

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