CSS-Kenntnisse: So fügen Sie einem Bild eine Maske hinzu (teilen)

Vorheriger Artikel „Was ist CSS-Syntax? Detaillierte Einführung in die Verwendungsmethoden und -regeln 》Einführung in die Verwendungsmethoden und -regeln der CSS-Syntax. Der folgende Artikel gibt Ihnen einige Tipps zum Hinzufügen von Maskeneffekten zu Bildern. Dieser Tipp ist sehr praktisch und kann Ihnen helfen, das Muster des Website-Layouts zu durchbrechen. Schauen Sie sich das an.

Masken hinzufügen

Masken teilen Ihrem Browser mit, welche Asset-Elemente sichtbar sein sollen, was sich hervorragend zum Erstellen kreativer Formen und Layouts eignet. Die Maskierung kann auf drei Arten mithilfe von Rasterbildern (z. B. PNG-Format mit transparenten Teilen), CSS-Verläufen oder SVG-Elementen erfolgen.

Beachten Sie, dass SVG im Gegensatz zu typischen Rasterbildern ohne nennenswerten Qualitätsverlust skaliert oder konvertiert werden kann.

Angehängter Code:

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

Es ist erwähnenswert, dass Firefox nur die neueste Version unterstützt, daher müssen wir Inline-SVG-Maskenelemente verwenden. Was passiert, wenn wir ein Rasterbild mit Transparenzstufen verwenden? Transparente Teile des Bildes sind nicht sichtbar, d. h. es werden undurchsichtige Segmente angezeigt, die andere Teile verbergen. Die Maskierung ist besonders leistungsstark, da Sie damit die gleichen Eigenschaften auf Hintergrundbilder anwenden und deren Position, Größe und Wiederholung definieren können.

Vorverarbeitung:

Nachbearbeitung:

Sie können Transparenzstufen verwenden, um Teile von animierten Bildern (z. B. GIF-Dateien) auszuschneiden. Wenn Sie diese Eigenschaften verwenden, vergessen Sie nicht, Cross- Browser-Unterstützung und fügen Sie das Geschäftspräfix für Verbrauchsmaterialien hinzu.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonCSS-Kenntnisse: So fügen Sie einem Bild eine Maske hinzu (teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!