Heim > Artikel > Web-Frontend > Wie mischt man Elemente in CSS?

Wie mischt man Elemente in CSS?

WBOYnach vorne: 2023-09-14 12:13:021506Durchsuche

Einführung

Gemischte Elemente in CSS sind eine Technik, mit der interessante visuelle Effekte erzeugt und das Webdesign verbessert werden. Mit der Eigenschaft „mix-blend-mode“ in CSS können Sie steuern, wie ein Element mit dem darunter liegenden Inhalt verschmilzt. In diesem Artikel erfahren Sie, wie Sie das Mix-Blend-Muster zum Mischen von Elementen in CSS verwenden.

Erfahren Sie mehr über die Mischmodi beim Mischen

mix-blend-mode ist eine CSS-Eigenschaft, mit der Sie den Mischmodus eines Elements festlegen können. Mischmodi bestimmen, wie zwei Elemente miteinander vermischt werden, und unterschiedliche Modi erzeugen unterschiedliche visuelle Effekte.

Standardmäßig ist der Mischmodus eines Elements in CSS „Normal“, was bedeutet, dass es normal über anderen Inhalten angezeigt wird. Mit den Mischmodi können Sie jedoch einen anderen Mischmodus für ein Element festlegen, sodass es auf eine bestimmte Art und Weise mit dem darunter liegenden Inhalt verschmilzt.

Es stehen mehrere Mischmodi zur Auswahl, von denen jeder einzigartige Effekte erzeugt. Hier finden Sie eine Übersicht über einige der am häufigsten verwendeten Mischmodi –

Normal – Standard-Mischmodus, der normalerweise Elemente über anderen Inhalten anzeigt
Multiplizieren – Verdunkeln Sie den Inhalt unter dem Element
Bildschirm – Machen Sie den Inhalt unter dem Element heller
Overlay – Erzeugen Sie eine Kombination aus Multiplikations- und Bildschirmeffekten
Color Dodge – Macht den Inhalt unter einem Element heller
Color Burn – Verdunkelt den Inhalt unter dem Element
Highlight – Erzeugen Sie eine Kombination aus Multiplikations- und Bildschirmeffekten basierend auf der Helligkeit des zugrunde liegenden Inhalts
Weiches Licht – Erzeugt einen ähnlichen Effekt, als würde man ein diffuses Licht auf den Inhalt unter dem Element strahlen lassen
Unterschied – Erzeugt einen Effekt, der den Unterschied zwischen einem Element und dem darunter liegenden Inhalt hervorhebt
Ausschluss – Erzeugt einen ähnlichen Effekt wie Differenz, jedoch mit weniger Kontrast
Mischmodus anwenden

Um den Mix-Blend-Modus auf ein Element in CSS anzuwenden, stellen Sie einfach die Eigenschaft auf den gewünschten Blend-Modus ein. Hier ist ein Beispiel -

.blended-element {
   mix-blend-mode: multiply;
}

Dieser Code legt den Mischmodus der .blished-element-Klasse auf Multiplikation fest. Das bedeutet, dass alles unterhalb dieses Elements abgedunkelt wird.

Sie können den Mix-Blend-Modus auch auf den Hintergrund eines Elements anwenden, indem Sie das Attribut „background-blend-mode“ verwenden. Dadurch können Sie interessante Effekte mit Hintergrundbildern und anderen Elementen auf der Seite erzeugen.

.background-element {
   background-image: url('background-image.jpg');
   background-blend-mode: screen;
}

Der Code setzt das Hintergrundbild der .background-element-Klasse auf „background-image.jpg“ und den „background-blend-mode“ auf „screen“. Dies bedeutet, dass das Hintergrundbild aufgehellt wird, wodurch ein Aufhellungseffekt entsteht.

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Blending Elements in CSS</title>
   <style>
      .blended-element {
         background-color: #ff00ff;
         mix-blend-mode: multiply;
         width: 300px;
         height: 200px;
      }
      .background-element {
         background-image: url('background-image.jpg');
         background-size: cover;
         background-blend-mode: screen;
         width: 100%;
         height: 500px;
      }
   </style>
</head>
<body>
   <div class="blended-element">
      <h1>Blended Element</h1>
      <p>This element is using mix-blend-mode to darken the content beneath it.</p>
   </div>
   <div class="background-element">
      <h1>Background Element</h1>
      <p>This element is using background-blend-mode to lighten the background image.</p>
   </div>
</body>
</html>

Anleitung

In diesem Beispiel haben wir zwei div-Elemente erstellt. Das erste Div hat eine Mix-Elementklasse und verwendet mix-blend-mode: multiply;, um den Inhalt darunter abzudunkeln. Das zweite Div hat eine Hintergrundelementklasse und verwendet den Hintergrundblendmodus: Bildschirm, um das Hintergrundbild heller zu machen.
Wir haben den Elementen mithilfe von CSS auch einige grundlegende Stile hinzugefügt. .blend-element hat eine rosa Hintergrundfarbe, während .background-element ein Hintergrundbild hat, das die gesamte Breite und Höhe der Seite abdeckt.

Wir empfehlen den Lesern dringend, alle genannten Mischmodi auszuprobieren, um das Thema besser zu verstehen.

Tipps und Hinweise

Bei der Verwendung des Mix-Blend-Modus sind einige Tipps und Überlegungen zu beachten –

Achten Sie auf die Auswirkung von Mischmodi auf Textinhalte. Gemischte Modi können die Lesbarkeit von Text erschweren. Daher ist es wichtig, die Auswirkungen auf den Textinhalt zu testen, bevor Sie ihn auf einer Live-Website implementieren.
Nicht alle Browser unterstützen alle Mischmodi. Überprüfen Sie die Browserkompatibilität, bevor Sie bestimmte Mischmodi verwenden.
Testen Sie den Mix-Blend-Modus unbedingt in verschiedenen Kontexten, um sicherzustellen, dass er den gewünschten Effekt erzielt.
Erwägen Sie die Verwendung der Mischmodi „Hintergrund“ und „Mischen“, um komplexe visuelle Effekte zu erzielen.
Zusammenfassend ist der Mix-Blend-Modus ein leistungsstarkes Werkzeug zum Erstellen interessanter visueller Effekte in CSS. Mit den vielen verfügbaren Mischmodi können Sie

Fazit

In diesem Artikel wird erläutert, wie Sie die Eigenschaft „mix-blend-mode“ zum Mischen von Elementen in CSS verwenden. Dieser Artikel bietet einen Überblick über Mischmodi und ihre Auswirkungen und erklärt, wie Sie das mix-blend-mode-Attribut auf HTML-Elemente und Hintergründe anwenden.

Das obige ist der detaillierte Inhalt vonWie mischt man Elemente in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html background

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：15 der besten CSS-Trends machen Ihr Webprojekt in Sekundenschnelle erfolgreich!Nächster Artikel：15 der besten CSS-Trends machen Ihr Webprojekt in Sekundenschnelle erfolgreich!

In Verbindung stehende Artikel

Mehr sehen