Heim  >  Artikel  >  Web-Frontend  >  CSS-Kenntnisse: So fügen Sie einem Bild eine Maske hinzu (teilen)

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

奋力向前
奋力向前Original
2021-07-27 17:11:015235Durchsuche

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.

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

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:

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

Nachbearbeitung:

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

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!

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