At midnight, the bald guy was still using CSS to process the text on the picture

Author: Ahmad shaded
Translator: Frontend Xiaozhi
Source: sitepoint

Like and look again, develop a habit

This article GitHub https://github.com/qq449245884/xiaozhi has been included, more previous categories of highly praised articles, also sorted out a lot of my documents, and tutorial materials. Welcome to Star and perfect. You can refer to the test center for review during the interview. I hope we can have something together.

In the process of doing the project, we may encounter such a component, the image of which is above the text. In some cases, depending on the image used, the text is difficult to read, such as the text is white and the background image is light.

There are different solutions to this situation, such as adding gradient overlays or colored background images, text shadows, etc.

Introduction

Every solution should solve a problem. Let's discuss the problem of this case. When designing components with text above the image, we need to pay attention to making the text easy to read.

Note that in the picture above, the version without gradient overlay is almost unreadable, which is detrimental to users. To solve this problem, we need to add a layer below the text to make it easier to read. There are also points to pay attention to when adding layers. Because accessibility is not considered in many solutions.

Multiple solutions

There are multiple solutions to make the text easier to read. Let's look at them one by one.

As shown in the figure above, there are different solutions to this problem. Note that the gradient solution is . why? Because this kind of scheme is easy to make the text lose the accessibility.

solution

The Gradient Overlay

Generally speaking, gradient overlay is the most common solution to make the text on the image clearer, so let's focus on it.

When implementing gradient overlay, there are two ways:

1. Use separate elements for gradients (pseudo-elements or empty <div> )
2. Apply a gradient as the background image.

Each of the above methods has its advantages and disadvantages, let's take a look.

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

At first glance, you might think that the gradient works well, which is not comprehensive enough. If you test the same gradient effect with more pictures, the results are as follows:

The contrast between white text and images is not always clear. For some people, it's acceptable, but using this gradient is a huge mistake because the text is not accessible.

The reason is that the gradient should cover more space in the vertical direction, so its height needs to be larger. The gradient is equal to the size of the content and cannot be used in all cases. To solve this problem, we can use min-height as shown below:

• .card__content elements min-height .
• Flexbox pushes the content to the bottom.

.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);
}

Another solution is to use only padding-top instead of min-height and flexbox .

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

Please note the difference between the left card and the right card, the gradient height is larger.

That looks good, can we do better? of course!

Gradual change

If you look closely, we will find that the end of the gradient is very abrupt. This is the so-called hard-edged phenomenon.

To make it better, we can apply the easing concept to gradients. This way, the gradient will look more natural, and hard edges will not be noticed at the end of the gradient.

In CSS, we need to have multiple gradient stops to achieve easing, because there is no native way to do this at the time of writing. The good news is that the CSS working group is discussing the possibility of implementing easing in CSS gradients, but it is not clear when it will be implemented.

Fortunately, Mr. Andreas Larsen created a convenient PostCSS and Sketch plugin , which can convert normal gradients into simplified gradients.

This is the CSS gradient for the example above:

.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%
  );
}

Horizontal gradient

Not only can the text on the processed image be vertical, we can also use them as a horizontal gradient. In the following case, it needs a horizontal gradient.

![uploading...]()

This is the CSS gradient above. I used the tools mentioned earlier to generate a gentle gradient.

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%
);

Mix solid colors and gradients

Learn about this model from the Netflix website here. On the homepage of the user who is not logged in, there is a title with a large background image.

I like it, but it hides a lot of image details. Make sure to use this feature only when the image is decorative.

<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%
  );
}

The following is the disassembly process.

Gradient overlay and text shadow

There is a very useful trick to make text better than images. Just use text-shadow , which may not be easy to notice, but it is very useful when the image cannot be loaded.

Look at the following example:

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

Gradient overlay, text shadow and opacity

This is a pattern noticed on Facebook's video player. They use multiple techniques to make text (and other UI elements) clearly visible. When dealing with a video player, it’s important to ensure that the elements above it are eye-catching.

.player__icon {
  opacity: 0.9;
}

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

The play icon is opacity: 0.9 . This helps them blend into the background below. Gives a feeling: the controls are mixed together.

In addition, using white text shadows in white text is an effective way to make the text clearer. Do you want to prove that the above method can work even if the background is a completely white image? Here you are.

YouTube does similar things with their videos.

Radial gradient

An interesting solution I learned from Netflix is to use radial gradients. Here is how it works:

1. Set the background color and background color.

1. Place the image in the upper right corner at 75% width.
2. The overlay is equal to the size and position of the image.

.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
  );
}

However, the Netflix team used an image as an overlay. The reason cannot be determined here, it may be a cross-browser issue or something else.

Choose accessible overlay colors

This is a great tool that can help us choose the correct overlay opacity according to the image.

Generally speaking, if you make sure that the gradient overlay can fill the text correctly, and has a good color contrast, that's fine.

test

A solution needs to be tested before it can be considered good, right? One method I use to test the gradient overlay is to add a white background below it. If the text is readable, the gradient will apply to any image we use. If not, it needs to be adjusted and enhanced.

In the above example, I chose the solid color under the heading, and the contrast is 4.74, which is better.

~End, I’m Shuwanzhi, see you next time!

---

possible bugs after code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, we recommend a useful BUG monitoring tool Fundebug .

Original: https://ishadeed.com/article/handling-text-over-image-css/

communicate with

The article is continuously updated every week, and you can search for "Great Move World" on WeChat to read and update it as soon as possible (one or two earlier than the blog). This article has been included on https://github.com/qq449245884/xiaozhi I have sorted out a lot of my documents, welcome to Star and improve it. You can refer to the test site for review for interviews. In addition, pay attention to the account. Reply 16076b62354f2b welfare background, you can see the welfare, you know.