CSS -mask-size- Eigenschaft
Beispiel
Legen Sie die Größe (in Prozent) für das Maskenebenenbild fest:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die mask-size
Eigenschaft gibt die Größe des Maskenebenenbildes an.
Standardwert: | Auto |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.maskSize="100px 200px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
CSS-Syntax
mask-image: auto|size|contain|cover|initial|inherit;
Eigenschaftswerte
Value | Description |
---|---|
auto | This is default |
size | Specifies the size of the mask image in px, em, etc, or in % |
contain | Scales the mask image in a way that both its width and its height fit inside the container |
cover | Scales the mask image in a way that both its width and its height cover the container |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Legen Sie die Größe (in Pixel) für das Bild der Maskenebene fest:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 200px 200px;
mask-size: 200px 200px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Verwandte Seiten
CSS-Referenz: mask-image-Eigenschaft
CSS-Referenz: mask-mode-Eigenschaft
CSS-Referenz: Mask-Origin-Eigenschaft
CSS-Referenz: mask-position-Eigenschaft
CSS-Referenz: Mask-Repeat-Eigenschaft
CSS-Tutorial: CSS-Maskierung