Der CSS-Hybridmodus realisiert kreative Bildeffekte durch Mix-Blend-Mode- und Hintergrund-Blend-Mode-Eigenschaften. 1. Mix-Blend-Mode steuert die Mischung von Elementen und Hintergrund, z. 2. Hintergrund-Blend-Mode steuert die Mischung von Hintergrundschichten wie überlagerung von Gradientent?nen; 3. Achten Sie bei der Verwendung auf die Browserkompatibilit?t. Die Unterstützung von Safari und Chrom ist gut, aber der IE unterstützt sie nicht. 4. Verwenden Sie das Isolationsattribut, um hierarchische Interferenzen zu vermeiden und sicherzustellen, dass der übergeordnete Container die Inhaltsunterstützung für den Mischungseffekt hat.

Im Webdesign ist CSS Blend Modi ein leistungsstarkes Tool, mit dem Ihre Bilder verschiedene kreative Effekte erzeugen k?nnen. Es macht die visuelle Pr?sentation nicht nur reicher, sondern verbessert auch die Schichtung und Atmosph?re der Gesamtseite. Wenn Sie Ihre Bilder ausdrucksvoller gestalten und sich nicht auf Photoshop oder andere Bildverarbeitungssoftware verlassen m?chten, ist CSS -Mischmodi einen Versuch wert.

Was sind CSS -Mischmodi?

Der CSS-Mischmodus bezieht sich auf die Art und Weise, wie mix-blend-mode und background-blend-mode verwendet werden, um die Mischung zwischen Elementen oder zwischen Hintergrundschichten zu steuern. Einfach ausgedrückt, sie bestimmen, wie Farben interagieren und so Effekte wie "Overlay", "weiches Licht", "Farbfilterung" erzeugen.

• mix-blend-mode : Wird verwendet, um zu steuern, wie ein Element mit dem dahinter stehenden Inhalt gemischt wird.
• background-blend-mode : Wird verwendet, um zu steuern, wie mehrere Hintergrundschichten eines Elements gemischt werden.

Sie k?nnen beispielsweise ein Bild mit einer durchscheinenden Farbe überlagern, um einen bestimmten Tonstil zu bilden, oder den Text in das Bild eindringen und es anzeigen lassen.

So verwenden Sie einen Mix-Blend-Modus, um einen Fusionseffekt von Bildern und Text zu erstellen

Dies ist ein sehr h?ufiges Bedürfnis: Lassen Sie den Text so aussehen, als w?re er durch das Bild "durch". Es ist nicht schwer zu implementieren:

1. Bereiten Sie einen Container mit Hintergrundbild vor
2. Setzen Sie einen Textabsatz hinein
3. Stellen Sie eine Farbe mit hohem Kontrast (z. B. wei?) für Text ein
4. Fügen Sie dann mix-blend-mode: difference; oder screen zum Text

 <div class = "Blend-container">
  <H1 class = "Blend-text"> Hallo Welt </h1>
</div>

 .Blend-container {
  Hintergrundbild: URL ('your-image.jpg');
  Breite: 100VW;
  H?he: 100VH;
  Anzeige: Flex;
  Justify-Content: Center;
  Ausrichtung: Zentrum;
}

.Blend-text {
  Schriftgr??e: 4REM;
  Farbe: wei?;
  Mix-Blend-Mode: Differenz;
}

Auf diese Weise k?nnen Sie den "Konflikt" zwischen dem Text und dem Bild sehen und einen starken visuellen Kontrast darstellen. Versuchen Sie verschiedene Mischmoduswerte wie screen , overlay und exclusion , und es wird unterschiedliche Effektstile geben.

Erstellen Sie den Gradienten-Overlay-Stil mit dem Hintergrund-Blend-Modus

Wenn Sie m?chten, dass das Bild einen bestimmten Filterstil wie Retro, Cool oder Warm hat, k?nnen Sie background-blend-mode verwenden, um die Farbschicht zu überlagern.

Zum Beispiel: Wenn Sie m?chten, dass ein Bild filmischer aussieht, k?nnen Sie dies tun:

1. Setzen Sie ein Bild als Hintergrund
2. Fügen Sie einen linearen Gradienten oder eine feste Farbschicht hinzu
3. Verwenden Sie background-blend-mode: multiply; oder overlay

 .Blend-Box {
  Breite: 100%;
  H?he: 400px;
  Hintergrundbild: Linear-Gradient (bis unten, RGBA (255, 0, 0, 0,3), RGBA (0, 0, 255, 0,3)), URL ('your-photo.jpg');
  Hintergrund-Blend-Mode: Overlay;
}

Auf diese Weise wird das Bild mit einer blauen und roten Farbe gef?rbt. Sie k?nnen den Farbwert und den Mischmodus -Typ anpassen, um unterschiedliche künstlerische Stile zu erstellen.

Notizen und Browserkompatibilit?t

Obwohl CSS -Mischmodi leistungsstark sind, müssen einige Dinge bezeichnet werden:

• Sie werden in Safari und Chrom gut unterstützt, aber nicht in einigen ?lteren Browsern wie dem IE
• Versuchen Sie es bei der Verwendung, isolation: isolate; Vermeiden Sie unn?tige hierarchische Einmischung
• Wenn Sie mix-blend-mode verwenden, stellen Sie sicher, dass der übergeordnete Container den entsprechenden Hintergrund oder Inhalt hat, da der Effekt m?glicherweise nicht sichtbar ist.

Wenn Sie sich Sorgen um Kompatibilit?t machen, k?nnen Sie den Test zuerst im Projekt durchführen oder eine Downgrade -L?sung für nicht unterstützte Browser bereitstellen.

Grunds?tzlich ist das. Meister Sie mehrere h?ufig verwendete Mischmodi und kombinieren Sie sie mit dem tats?chlichen Layout der Szene. Sie k?nnen leicht beeindruckende visuelle Effekte erzielen.

Das obige ist der detaillierte Inhalt vonVerwendung von CSS -Mischmodi für kreative Bildeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!