本文已获得原作者Ahmadshadow授权转载。在做项目的过程中，我们可能会遇到这样一个图片上面有文字的组件。在某些情况下，根据使用的图像，文本难以阅读，例如文本是白色的，背景图像是浅色的。对于这种情况有几种不同的解决方案，例如添加渐变叠加层或有色背景图像、文本阴影等。简介每个解决方案都应该解决一个问题。让我们探讨一下这个案例中的问题。在设计图像上方带有文本的组件时，我们需要注意文本必须易于阅读。请注意，在上图中，没有渐变叠加的版本几乎不可读，这对用户不利。为了解决这个问题，我们需要在文本下方添加一个图层，以使其更易于阅读。添加层也有一些注意事项。因为，很多解决方案都没有考虑可访问性。各种解决方案有多种解决方案可以使文本更易于阅读。让我们一一看看。如上所示，这个问题有不同的解决方案。注意梯度解决方案。为什么？因为这种解决方案往往会使文本失去可访问性。解决方案渐变叠加（GradientOverlay）一般来说，渐变叠加是最常见的解决方案，可以让图片上的文字更加清晰，下面重点介绍一下。实现渐变叠加时，有两种方式：为渐变使用单独的元素（伪元素或空元素）应用渐变作为背景图像。以上各种方法各有优缺点，下面我们一起来看看吧。.card__content{position:absolute;/*otherstyles(left,top,right,andpadding)*/background:linear-gradient(totop,rgba(0,0,0,0.85),transparent);}乍一看，你可能会觉得渐变效果不错，不够全面。如果我用更多不同的图像测试相同的渐变效果，结果如下：白色文本和图像之间的对比并不总是清晰。对于某些人来说，这是可以接受的，但是使用这种渐变是一个巨大的错误，因为文本是不可访问的。原因是渐变要垂直覆盖更多的空间，所以它的高度需要更大。与内容大小相等的渐变并非在所有情况下都有效。为了解决这个问题，我们可以像这样使用最小高度：min-heightof.card__contentelement。Flexbox将内容推到底部。.card__content{position:absolute;/*otherstyles(left,top,right,andpadding)*/display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(totop,rgba(0,0,0,0.85),transparent);}另一个解决方案是只使用padding-top而不是min-height和flexbox。.card__content{position:absolute;padding-top:60px;background:linear-gradient(totop,rgba(0,0,0,0.85),transparent);}注意左右卡片的区别，渐变高度更大。看起来不错，我们可以做得更好吗？当然如此！如果仔细观察渐变，我们会发现渐变结束的地方非常突兀。这就是所谓的硬边现象。为了让它变得更好，我们可以将缓动的概念应用于渐变。这样渐变会显得更自然，您不会注意到渐变末端的硬边。在CSS中，我们需要有多个渐变停止点来实现缓动，因为在撰写本文时还没有本地方法可以做到这一点。好消息是CSS工作组正在讨论在CSS渐变中实现缓动的可能性，但尚不清楚何时会发生。值得庆幸的是，AndreasLarsen先生创建了一个方便的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渐变，我使用上述工具生成了一个柔和的渐变。背景：线性渐变(toright,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网站阅读有关此图案的信息。在未登录用户的主页上，有一个带有大背景图像的标题。我喜欢它，但它隐藏了很多图像细节。确保仅在图像具有装饰性时使用此功能。 随处观看。随时取消。h2p>无限电影、电视节目等。
