CSS-Mischmodi-CSS-Tutorial-php.cn

CSS-Mischmodi

高洛峰

Freigeben： 2017-02-23 10:07:49

Original

1668 Leute haben es durchsucht

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>

Nach dem Login kopieren

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