Vlastnost CSS mask-position
Příklad
Nastavte polohu obrázku vrstvy masky na střed:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost mask-position
nastavuje počáteční pozici obrazu masky (vzhledem k oblasti polohy masky).
Tip: Ve výchozím nastavení je obraz masky umístěn v levém horním rohu prvku a opakuje se svisle i vodorovně.
Výchozí hodnota: | 0 % 0 % |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.maskPosition="100px střed" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
mask-position | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Syntaxe CSS
mask-position: value;
Hodnoty vlastností
Value | Description |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom |
If you only specify one keyword, the other value will be "center" |
x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% |
xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Nastavte polohu obrázku vrstvy masky do pravého dolního rohu:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 100% 100%;
mask-position: 100% 100%;
}
Související stránky
CSS reference: vlastnost mask-image
CSS reference: vlastnost mask-mode
CSS reference: vlastnost mask-origin
CSS reference: vlastnost mask-repeat
CSS reference: vlastnost mask-size
CSS tutoriál: CSS maskování