Heim > Artikel > Web-Frontend > CSS-Mischmodi

CSS-Mischmodi

高洛峰Original: 2017-02-23 10:07:491578Durchsuche

Vorherige Wörter

Der kaskadierende Kontext-Z-Index löst nur das Problem, dass zwei Elemente abdecken, welches näher am Benutzer liegt. Der CSS-Mischmodus befasst sich mit der Frage, wie die überdeckenden Teile zweier Elemente gemischt werden. Wenn Sie Photoshop kennen, dürfte Ihnen dieses Phänomen bekannt sein. CSS3 verfügt über zwei Eigenschaften im Zusammenhang mit den Mischmodi: mix-blend-mode und background-blend-mode In diesem Artikel wird der CSS-Mischmodus im Detail vorgestellt

Element Mix

Element Mix-. blend-mode gilt für die Mischung zwischen zwei Elementen

mix-blend-mode

Anfangswert: normal

Gilt für: alle Elemente

Vererbung: Keine

Farbverstärkung | ) |. soft-light (Differenz) |. hue (saturation) | , Android4. 4-Nicht unterstützt, Safari und IOS müssen das Präfix -webkit- hinzufügen

[Hinweis] Dieses Element erstellt einen kaskadierenden Kontext, das Z-Index-Attribut ist gültig

Hintergrund Überblendung

Hintergrundüberblendung Der Hintergrundüberblendungsmodus gilt für mehrere Hintergrundbilder eines Elements oder eine Mischung zwischen Hintergrundbildern und Hintergrundfarben

Hintergrundüberblendungsmodus

Anfangswert: normal

gilt für: alle Elemente

Vererbung: keine

Kompatibilität: IE-Browser, Android4.4-nicht unterstützt, Safari und IOS müssen das -webkit- Präfix hinzufügen

Isolation

Die Funktion der Isolation besteht darin, einen Stapelkontext zu erstellen, der hauptsächlich bei Verwendung mit dem Attribut mix-blend-mode verwendet wird, um den Mischmodus nur auf ein bestimmtes Element oder eine bestimmte Gruppe von Elementen anzuwenden

Isolation

Anfangswert: auto

Gilt für: alle Elemente

Vererbung: Keine

Wert: auto |. isolieren (erstellt einen neuen Stapelkontext) |. inherit |. unset

Wenn Sie keinen Stapelkontext verwenden, da die Hintergrundfarben von

transparent sind,

vermischt sich mit der

Hintergrundfarbe und wird rosa. Nach der Verwendung von

<style>
body{background-color: gray;}
.test1,.test2{display: inline-block;width: 100px;height: 100px;border:1px solid black;}
.test2{isolation: isolate;}
.in{width: 50px;height: 50px;background-color: red;mix-blend-mode: screen;}
</style>
</head>
<body>
<p class="test1">
    <p class="in"></p>
</p>
<p class="test2">
    <p class="in"></p>
</p>

wird

von isolation: isolate isoliert und nicht mit dem Hintergrund von .test1 vermischt, wodurch seine ursprüngliche rote Farbe erhalten bleibt .test2.in Da die Rolle von <body> darin besteht, eine zu erstellen StapelkontextSolange also ein Stapelkontext erstellt werden kann, kann der Isolationseffekt erzielt werden. Daher können auch relative Stile, Filter und andere Stile ähnliche Effekte erzielen. isolation: isolate.test2Weitere Artikel zum CSS-Mischmodus: Bitte achten Sie auf die chinesische PHP-Website! <body><body>

isolation: isolate

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-FilterNächster Artikel：CSS-Filter

In Verbindung stehende Artikel

Mehr sehen