Utilisez intelligemment les modes de fusion CSS pour adapter intelligemment le texte à la couleur d'arrière-plan

<p>

<p>Il y a un morceau de texte sur la page. Ce texte peut-il être affiché dans différentes couleurs sous différentes couleurs d'arrière-plan ? On l’appelle également communément changement de couleur intelligent. Comme ceci :

<p>

<p> Le texte apparaît en blanc sur fond noir et en noir sur fond blanc. Cela semble être un effet très compliqué, mais il est en fait très facile à implémenter en CSS. Aujourd'hui, je vais vous présenter une petite astuce en CSS, utilisez le mode de mixage mix-blend-mode: difference pour. rendre le texte intelligent. Adaptez la couleur d’arrière-plan. [Apprentissage recommandé : tutoriel vidéo CSSmix-blend-mode: difference，让文字智能适配背景颜色。【推荐学习：css视频教程】

混合模式 mix-blend-mode: difference

<p>CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。一共有下图所示的一些混合模式：

<p>

<p>其中，本文的主角是 mix-blend-mode: difference，意为差值模式。该混合模式会查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。

<p>与白色混合将使底色反相；与黑色混合则不产生变化。

<p>通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。

<p>该混合模式最常见的应用场景就是文章开头描述的场景，实现文本在不同背景色下展示不同的颜色。

<p>最适合于黑白场景，非常简单的一个 DEMO：

<div></div>

div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);

    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

<p>效果如下：

<p>

<p>CodePen Demo -- linear-gradient + Mix-blend-mode

<p>当然，不一定是黑色或者白色，看看下面这个例子，有这样一种场景，有的时候我们不太确定背景颜色的最终表现值（可能是后台配置，传给前端），但是又需要让文字能够在任何背景颜色下都正常展出，此时，也可以尝试使用 mix-blend-mode: difference。

<ul class="flex-box">
  <div class="box">
    <p>开通会员查看我的VIP等级</p>
  </div>
   // ..... 
</ul>

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

<p>无论背景色是什么颜色，设置了 mix-blend-mode: difference 的 <p> 元素都可以正常展示出文本：

<p>

<p>CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色

mix-blend-mode:difference 的缺点

<p>当然，这个方法不是完美的，因为通过 mix-blend-mode:difference]

<p>Mixing mode mix-blend-mode: difference

CSS3 a ajouté un attribut très intéressant - mix-blend-mode, où les traductions chinoises de mix et blend sont toutes deux mélangées, alors cet attribut Le littéral La traduction de la fonction est le mode de fusion. Bien sûr, nous l'appelons généralement mode de fusion. Il existe certains modes de fusion, comme indiqué ci-dessous :

<p>

Parmi eux, le protagoniste de cet article est mix-blend-mode: difference, qui signifie mode différence. Ce mode de fusion examine les informations de couleur dans chaque canal, compare la couleur de base à la couleur du dessin et soustrait la valeur du pixel le plus sombre de la valeur du pixel le plus clair.

• Mélanger avec du blanc inversera la couleur de fond ; mélanger avec du noir ne provoquera aucun changement. Pour faire simple, la zone claire du calque supérieur inverse la couleur du calque inférieur et la zone sombre affiche la couleur normalement. L'effet
est la couleur complètement opposée à l'image originale
• . Le scénario d'application le plus courant de ce mode de fusion est le scénario décrit au début de l'article, qui permet au texte d'afficher différentes couleurs sur différentes couleurs d'arrière-plan.
• Le plus adapté aux scènes en noir et blanc, une DÉMO très simple : rrreeerrreeeL'effet est le suivant :
• 
Démo CodePen -- Linear-gradient + Mix-blend-mode
• Bien sûr, ce n'est pas nécessairement noir ou blanc. Jetez un œil à l'exemple ci-dessous. Parfois, nous ne sommes pas sûrs de la performance finale. valeur de la couleur d'arrière-plan (peut-être la configuration d'arrière-plan, transmise au front-end), mais le texte doit être affiché normalement sous n'importe quelle couleur d'arrière-plan. À ce stade, vous pouvez également essayer d'utiliser mix-blend-mode : différence.
rrreeerrreee
• Quelle que soit la couleur d'arrière-plan, l'élément <p> avec l'ensemble mix-blend-mode: difference peut afficher le texte normalement :
• Démo CodePen -- mix-blend-mode:difference réalise un arrière-plan adaptatif de la couleur du texte

mix-blend-mode:difference Inconvénients<p>

Bien sûr, cette méthode n'est pas parfaite, car après avoir superposé mix-blend-mode:difference avec la couleur de fond Bien que la couleur puisse être affiché normalement, ce n'est pas nécessairement la couleur la plus appropriée ou la meilleure couleur pour l'effet d'affichage. <p>

Lorsqu'il est réellement utilisé ici, dans des scènes non en noir et blanc, davantage d'expériences sont nécessaires pour faire des choix. <p>

🎜Enfin🎜🎜🎜Pour résumer, cet article présente une petite astuce pour utiliser le mode de fusion CSS pour réaliser l'affichage en arrière-plan de l'adaptation du texte. Si le mode de fusion vous intéresse, je vous recommande de lire mes articles suivants : 🎜🎜🎜🎜 Incroyable. mode de fusion mix-blend-mode🎜🎜🎜🎜Incroyable mode de fusion background-blend-mode🎜🎜🎜🎜Deux lignes de code CSS pour implémenter n'importe quelle technologie de coloration des couleurs pour les images🎜🎜🎜🎜Utiliser habilement CSS pour créer des codes QR de couleurs dégradées 🎜 🎜🎜🎜Astuces CSS | Utilisez les modes de fusion pour obtenir un effet de vague creuse de texte🎜🎜🎜🎜Explorez le problème d'échec CSS 3D causé par les filtres du mode de fusion CSS🎜🎜🎜🎜CSS Art - Utilisez l'arrière-plan pour créer divers arrière-plans merveilleux🎜 🎜🎜🎜 Bon, c'est la fin de cet article, j'espère qu'il vous sera utile🎜🎜🎜Adresse originale : https://www.cnblogs.com/coco1s/p/16012545.html🎜🎜Auteur : ChokCoco🎜

<p> (Partage de vidéos d'apprentissage : front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!