CSS implementiert die Maskenfunktion-HTML-Tutorial-php.cn

CSS implementiert die Maskenfunktion

巴扎黑

Freigeben： 2018-05-17 14:29:34

Original

5369 Leute haben es durchsucht

Vorherige Wörter

CSS-Masken wurden im April 2008 von Apple zur Webkit-Engine hinzugefügt. Maskierung bietet die Möglichkeit, die Transparenz eines Elements auf Pixelebene zu steuern, ähnlich dem Effekt des Alpha-Transparenzkanals in PNG24-Bit oder PNG32-Bit. In diesem Artikel wird die CSS-Maske im Detail vorgestellt

Übersicht

Das Bild besteht aus drei RGB-Kanälen und der für jedes Pixel definierten Farbe. Darüber gibt es aber einen vierten Kanal, den Alpha-Kanal, der über die Helligkeit die Transparenz jedes Pixels definiert. Weiß bedeutet undurchsichtig, Schwarz bedeutet transparent und Grau dazwischen bedeutet durchscheinend. Das Urheberrecht liegt beim Autor.

Die Funktion der Maske besteht darin, ein transparentes Bild oder einen Farbverlauf zu verwenden, um den Hintergrund des Elements zu maskieren. Daher ist die Maske dem Hintergrund sehr ähnlich, außer dass es kein Farbunterattribut gibt und die verbleibenden 6 Unterattribute des Hintergrunds alle

haben. Die Maskenmaske ist ein zusammengesetztes Attribut, einschließlich der Maske. Bild, Maske – Die acht Attribute mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size und mask-composite

[Hinweis] IE-Browser unterstützt es nicht, und Bei Browsern mit Webkit-Kernel (einschließlich Chrome, Safari, IOS, Android) müssen Sie das Präfix -webkit- hinzufügen. Es ist wichtig zu beachten, dass der Firefox-Browser auch das Webkit-Mask-Attribut

[mask-image]

unterstützt. Der Standardwert ist „none“, der Wert ist ein transparentes Bild oder ein transparenter Farbverlauf

【Maskenwiederholung】

Der Standardwert ist Wiederholung, die optionalen Werte sind die gleichen wie bei Hintergrundwiederholung, die Details finden Sie hier

【Maskenposition 】

Der Standardwert ist 0 0, der optionale Wert ist derselbe wie die Hintergrundposition, die Details finden Sie hier

[mask-clip]

Der Standardwert ist border -box, der optionale Wert ist der gleiche wie „background-clip“, die Details finden Sie hier

[mask-origin]

Der Standardwert ist border-box, der optionale Wert ist der gleiche wie Hintergrund-Ursprung, die Details finden Sie hier

【Maskengröße】

Der Standardwert ist auto, der optionale Wert ist derselbe wie Hintergrundgröße, die Details finden Sie hier

【Maskenmodus】

Der Standardwert ist Match-Quelle, die optionalen Werte sind Alpha, Luminanz, Match-Quelle oder ihre Kombination

[mask-composite]

Der Standardwert ist „addieren“, die optionalen Werte sind „addieren“, „subtrahieren“, „schneiden“, „ausschließen“

[Hinweis] Nur Firefox unterstützt den Maskenmodus und die „Mask-Composite“-Instanz

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.wrap{position:absolute;width: 400px;border:1px solid black;}#mask{height: 300px;background:url() lightblue;-webkit-mask:  url() no-repeat;animation: 2s maskPosition infinite alternate ;}#mask:hover{animation: none;}@keyframes maskPosition{0%{-webkit-mask-position:0 0;}100%{-webkit-mask-position:100% 100%;}}</style></head><body><p class="wrap"><p id="mask"></p>    </p><script>var oBox = document.getElementById('mask');
oBox.onmousemove = function(e){
    e = e || event;
    oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
}    
</script></body></html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCSS implementiert die Maskenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!