Partagez quelques conseils pour traiter le texte sur les images avec CSS-tutoriel CSS-php.cn

Cet article vous présentera comment utiliser CSS pour traiter le texte sur les images. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Partagez quelques conseils pour traiter le texte sur les images avec CSS

Au cours du projet, nous pouvons rencontrer un composant avec du texte au-dessus de l'image. Dans certains cas, le texte est difficile à lire en fonction de l'image utilisée, par exemple le texte est blanc et l'image d'arrière-plan est claire.

Il existe différentes solutions pour cette situation, comme l'ajout d'une superposition de dégradé ou d'une image d'arrière-plan teintée, d'une ombre de texte, etc.

Introduction

Chaque solution doit résoudre un problème. Explorons les problèmes dans ce cas. Lors de la conception d'un composant avec du texte au-dessus d'une image, nous devons faire attention à ce que le texte soit facile à lire.

Partagez quelques conseils pour traiter le texte sur les images avec CSS

Notez sur l'image ci-dessus que la version sans la superposition de dégradé est quasiment illisible, ce qui est préjudiciable à l'utilisateur. Pour résoudre ce problème, nous devons ajouter un calque sous le texte pour le rendre plus facile à lire. Il y a aussi des choses auxquelles il faut faire attention lors de l’ajout de calques. Parce que l’accessibilité n’est pas prise en compte dans de nombreuses solutions.

Solutions multiples

Il existe différentes solutions pour rendre le texte plus facile à lire. Regardons chacun.

Partagez quelques conseils pour traiter le texte sur les images avec CSS

Comme le montre l'image ci-dessus, il existe différentes solutions à ce problème. Il convient de noter la solution de dégradé. Pourquoi? Parce que cette solution fait facilement perdre l’accessibilité au texte.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Solution

La superposition de dégradé)

De manière générale, la superposition de dégradés est la solution la plus courante pour rendre le texte sur une image plus clair, alors concentrons-nous là-dessus.

Lors de la mise en œuvre de la superposition de dégradés, il existe deux manières :

Utiliser des éléments séparés pour les dégradés (pseudo-éléments ou vides <p></p>)
Appliquer le dégradé comme image d'arrière-plan.

Chacune des méthodes ci-dessus a ses avantages et ses inconvénients, jetons-y un coup d'œil.

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

Copier après la connexion

Partagez quelques conseils pour traiter le texte sur les images avec CSS

À première vue, vous pourriez penser que même si l'effet de dégradé est génial, il n'est pas assez complet. Si j'ai testé le même effet de dégradé avec un ensemble d'images plus diversifié, voici les résultats :

Partagez quelques conseils pour traiter le texte sur les images avec CSS

Le contraste entre le texte blanc et l'image n'est pas toujours net. Pour certaines personnes, c'est acceptable, mais utiliser ce dégradé est une énorme erreur car le texte est inaccessible.

La raison est que le dégradé doit couvrir plus d'espace verticalement, sa hauteur doit donc être plus grande. Un dégradé égal à la taille du contenu ne fonctionnera pas dans tous les cas. Pour résoudre ce problème, nous pouvons utiliser min-height comme indiqué ci-dessous :

.card__content pour l'élément min-height.
Flexbox pousse le contenu vers le bas.

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

Copier après la connexion

Une autre solution consiste simplement à utiliser padding-top au lieu de min-height et flexbox.

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

Copier après la connexion

Veuillez noter la différence entre la carte de gauche et la carte de droite, la hauteur du dégradé est plus grande.

Ça a l'air bien, peut-on faire mieux ? Bien sûr que oui !

Dégradé lent

Si nous regardons attentivement, nous constaterons que la fin du dégradé est très abrupte. C'est ce qu'on appelle le phénomène de bord dur.

Pour le rendre encore meilleur, nous pouvons appliquer le concept d'assouplissement au dégradé. De cette façon, le dégradé apparaîtra plus naturel et aucun bord dur ne sera visible à la fin du dégradé.

Partagez quelques conseils pour traiter le texte sur les images avec CSS

En CSS, nous avons besoin de plusieurs arrêts de dégradé pour obtenir un assouplissement, car il n'existe aucun moyen natif de le faire au moment de la rédaction. La bonne nouvelle est que le groupe de travail CSS discute de la possibilité d'implémenter l'assouplissement des dégradés CSS, mais on ne sait pas quand cela se produira.

Heureusement, M. Andreas Larsen a créé un plugin PostCSS et Sketch pratique qui convertit les dégradés normaux en dégradés simplifiés.

Voici le dégradé CSS pour l'exemple ci-dessus :

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

Copier après la connexion

Partagez quelques conseils pour traiter le texte sur les images avec CSS

Dégradé horizontal

Gestion du texte sur les images non seulement ils peuvent être verticaux, mais nous pouvons également les utiliser comme dégradés horizontaux. Dans ce cas, il faut un dégradé horizontal.

Partagez quelques conseils pour traiter le texte sur les images avec CSS

Voici le dégradé CSS ci-dessus, j'ai utilisé l'outil mentionné précédemment pour générer le dégradé doux.

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

Copier après la connexion

混合纯色和渐变

这里从Netflix网站了解了这种模式。在未登录用户的主页上，有一个带有大背景图像的标题。

Partagez quelques conseils pour traiter le texte sur les images avec CSS

我喜欢它，但是它隐藏了很多图像细节。确保仅在图像具有装饰性时才使用此功能。

<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>

Copier après la connexion

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

Copier après la connexion

下面是拆解过程。

Partagez quelques conseils pour traiter le texte sur les images avec CSS

渐变叠加和文本阴影

有一个很有用的小技巧，可以让文字比图像更好。就是使用 text-shadow，这可能不容易注意到，但在图像无法加载的情况下，这是非常有用的。

看下面的例子：

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

Copier après la connexion

1Partagez quelques conseils pour traiter le texte sur les images avec CSS

渐变叠加，文本阴影和不透明度

这是在Facebook的视频播放器上注意到的模式。他们使用多种技术来使文本（和其他UI元素）清晰可见。与视频播放器打交道时，确保其上方的元素应引人注目非常重要。

Partagez quelques conseils pour traiter le texte sur les images avec CSS

.player__icon {
  opacity: 0.9;
}

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

Copier après la connexion

播放图标为opacity: 0.9。这有助于使它们与下面的背景融为一体。给人一种感觉：控件是混合在一起的。

此外，在白色文本中使用白色文本阴影是使文本更清晰的有效方法。你是否想要证明，即使背景是完全白色的图像，上面的方法也可以工作?给你。

Partagez quelques conseils pour traiter le texte sur les images avec CSS

YouTube也对他们的视频做类似的事情。

Partagez quelques conseils pour traiter le texte sur les images avec CSS

径向渐变

我从Netflix了解到的一个有趣的解决方案是使用径向渐变。下面是它的工作原理：

设置底色背景颜色。
将图像以75%的宽度放置到右上角。
覆盖层等于图像的大小和位置。

Partagez quelques conseils pour traiter le texte sur les images avec CSS

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

Copier après la connexion

不过，Netflix团队使用了一张图像作为覆盖层。这里不能确定原因，可能是一个跨浏览器的问题或其他东西。