Nutzen Sie geschickt CSS-Mischmodi, um Text intelligent an die Hintergrundfarbe anzupassen

<p>

<p>Auf der Seite befindet sich ein Text. Kann dieser Text in verschiedenen Farben unter verschiedenen Hintergrundfarben angezeigt werden? Es wird allgemein auch als intelligenter Farbwechsel bezeichnet. Etwa so:

<p>

<p> Text erscheint weiß auf schwarzem Hintergrund und schwarz auf weißem Hintergrund. Es scheint ein sehr komplizierter Effekt zu sein, aber er ist tatsächlich sehr einfach in CSS zu implementieren. Heute werde ich einen kleinen Trick in CSS vorstellen Machen Sie den Text intelligent. [Empfohlenes Lernen: CSS-Video-Tutorialmix-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>Mischmodus mix-blend-mode: Differenz

CSS3 hat ein sehr interessantes Attribut hinzugefügt - mix-blend-mode, wobei die chinesischen Übersetzungen von mix und blend beide mix sind, dann dieses Attribut Das Literal Die Übersetzung der Funktion lautet Mischmodus. Natürlich nennen wir sie normalerweise Mischmodus. Es gibt einige Mischmodi, wie unten gezeigt:

<p>

Unter diesen ist mix-blend-mode:difference der Protagonist dieses Artikels, was Differenzmodus bedeutet. Dieser Mischmodus betrachtet die Farbinformationen in jedem Kanal, vergleicht die Grundfarbe mit der Zeichnungsfarbe und subtrahiert den Pixelwert des dunkleren Pixels vom Pixelwert des helleren Pixels.

• Das Mischen mit Weiß führt zu einer Umkehrung der Hintergrundfarbe; das Mischen mit Schwarz führt zu keiner Änderung. Um es einfach auszudrücken: Der helle Bereich der oberen Ebene invertiert die Farbe der unteren Ebene und der dunkle Bereich zeigt die Farbe normal an. Der
Effekt ist die völlig entgegengesetzte Farbe zum Originalbild
• . Das häufigste Anwendungsszenario dieses Mischmodus ist das am Anfang des Artikels beschriebene Szenario, das es ermöglicht, dass Text unterschiedliche Farben auf unterschiedlichen Hintergrundfarben anzeigt.
• Am besten für Schwarz-Weiß-Szenen geeignet, eine sehr einfache DEMO: rrreeerrreeeDer Effekt ist wie folgt:
• 
CodePen-Demo – linear-gradient + Mix-blend-mode
• Sehen Sie sich das folgende Beispiel an. Manchmal sind wir uns über die endgültige Leistung nicht sicher Wert der Hintergrundfarbe (vielleicht die Hintergrundkonfiguration, die an das Frontend übergeben wird), aber der Text muss normal unter jeder Hintergrundfarbe angezeigt werden. Zu diesem Zeitpunkt können Sie auch versuchen, den mix-blend-mode zu verwenden: Unterschied.
rrreeerrreee
• Unabhängig von der Hintergrundfarbe kann das <p>-Element mit der Einstellung mix-blend-mode: diffusion Text normal anzeigen:
• CodePen-Demo – mix-blend-mode:difference realisiert Textfarbe-adaptiven Hintergrund

mix-blend-mode:difference Nachteile<p>

Natürlich ist diese Methode nicht perfekt, da nach dem Überlagern von mix-blend-mode:difference mit der Hintergrundfarbe die Farbe zwar möglich ist Obwohl die Farbe normal angezeigt werden kann, handelt es sich nicht unbedingt um die am besten geeignete Farbe oder die beste Farbe für den Anzeigeeffekt. <p>

Wenn es hier tatsächlich in Nicht-Schwarz-Weiß-Szenen verwendet wird, sind weitere Experimente erforderlich, um Entscheidungen zu treffen. <p>

🎜Abschließend🎜🎜🎜Zusammenfassend stellt dieser Artikel einen kleinen Trick vor, um den CSS-Mischmodus zu verwenden, um die Hintergrundanzeige für Textanpassungen zu realisieren. Wenn Sie sich für den Mischmodus interessieren, empfehle ich Ihnen, meine folgenden Artikel zu lesen: 🎜🎜🎜🎜 Unglaublich Mischmodus „Mix-Blend-Modus“🎜🎜🎜🎜Unglaublicher Mischmodus „Hintergrund-Mischmodus“🎜🎜🎜🎜Zwei Zeilen CSS-Code zum Implementieren jeder Farbfarbtechnologie für Bilder🎜🎜🎜🎜Verwenden Sie CSS geschickt, um QR-Codes mit Verlaufsfarben zu erstellen 🎜 🎜🎜🎜CSS-Kenntnisse |. Verwenden Sie Mischmodi, um einen Texthohlwelleneffekt zu erzielen. 🎜🎜🎜🎜Erkunden Sie das durch CSS-Mischmodusfilter verursachte CSS-3D-Fehlerproblem Okay, das ist das Ende dieses Artikels, ich hoffe, er ist hilfreich für Sie🎜🎜🎜Originaladresse: https://www.cnblogs.com/coco1s/p/16012545.html🎜🎜Autor: ChokCoco🎜

<p> (Lernvideo-Sharing: Web-Frontend)

Das obige ist der detaillierte Inhalt vonNutzen Sie geschickt CSS-Mischmodi, um Text intelligent an die Hintergrundfarbe anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!