在CSS中处理图片上的文字

Your new development career awaits. Check out the latest listings.ads via Carbon

You might come across a UI component that has text above an image. In some cases, the text will be hard to read depending on the image being used. There are some different solutions like adding a gradient overlay, or a tinted background image, text-shadow, and others. I got encouraged to write this article after seeing this tweet from Addy Osmani.

你可能会遇到一个UI组件，它的文本在图像上方。在某些情况下，根据所使用的图像，文本将很难阅读。有一些不同的解决方案，比如添加一个渐变的覆盖层，或者一个有色的背景图片，文本阴影，以及其他一些。在看到Addy Osmani的这条推文后，我被鼓励写这篇文章。

In this article, I will explore the different approaches and solutions for this problem, and how to communicate the UI with a front-end developer to make sure that it’s implemented as per the design mockup since some details can be easily missed in CSS.

在这篇文章中，我将探讨这个问题的不同方法和解决方案，以及如何与前端开发人员沟通UI，以确保它按照设计模拟图实现，因为一些细节在CSS中很容易被遗漏。

Introduction

简介

Each solution is supposed to solve a problem. Let’s explore the problem for our case. When designing a component that has text above an image, we should take care of making the text easy to read.

每个解决方案都应该是为了解决一个问题。让我们来探讨一下我们案例中的问题。当设计一个图像上方有文字的组件时，我们应该注意使文字易于阅读。

Notice that the version without a gradient overlay is barely readable. This isn’t good for the user. To solve this, we need to add a layer below the text so that it can be easy to read. Adding that layer can be challenging, and I have seen many who implement this solution without taking accessibility in mind.

请注意，没有梯度叠加的版本几乎无法阅读。这对用户来说并不是好事。为了解决这个问题，我们需要在文本下面添加一个图层，以便于阅读。添加该层可能是一个挑战，我看到很多人在实施这个解决方案时没有考虑到可及性。

An overview of the possible solutions

可能的解决方案概述

There are different solutions for making the text easier to read. Let’s get an overview of them.

有不同的解决方案来使文本更容易阅读。让我们来了解一下它们的概况。

As you’ve seen, there are different solutions to the problem. The ones that need more care are the gradient solutions. Why? Because it’s so easy to add a gradient layer and the text won’t be accessible.

正如你所看到的，这个问题有不同的解决方案。需要更多关注的是梯度解决方案。为什么呢？因为添加一个渐变层很容易，而文字就...