CSS మాస్క్-పోజిషన్ అట్రిబ్యూట్

నిర్వచనం మరియు ఉపయోగం

mask-position ఈ లక్షణం మాస్క్ స్థానానికి సంబంధించిన స్థానాన్ని నిర్ణయిస్తుంది (మాస్క్ స్థానానికి సంబంధించిన ప్రాంతం సంబంధించి).

సలహా:అప్రమేయంగా, మాస్క్ చిత్రం ఎలిమెంట్ ఎడమ మూల భాగంలో ఉంటుంది మరియు ఎడమ, కుడి దిశల్లో పరితక్షణం చేస్తుంది.

ఉదాహరణ

ఉదాహరణ 1

మాస్క్ రీతి చిత్రం స్థానాన్ని మధ్యస్థంగా సెట్ చేయండి:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

మాస్క్ రీతి చిత్రం స్థానాన్ని కుడిమూల భాగానికి సెట్ చేయండి:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

స్వయంగా ప్రయత్నించండి

CSS సంకేతం

mask-position: value;

లక్షణ విలువ

విలువ వివరణ
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 మాత్రమే ఒక కీలక పదాన్ని సూచించినట్లయితే, మరొక విలువ "center" గా ఉంటుంది.
x% y%

మొదటి విలువ అడుగున స్థానాన్ని, రెండవ విలువ ఎత్తు స్థానాన్ని నిర్ణయిస్తుంది.

ఎడమ మూల భాగం 0% 0% ఉంటుంది. కుడిమూల భాగం 100% 100% ఉంటుంది.

మాత్రమే ఒక విలువను సూచించినట్లయితే, మరొక విలువ 50% గా ఉంటుంది.

అప్రమేయ విలువ: 0% 0%
xpos ypos

మొదటి విలువ అడుగున స్థానాన్ని, రెండవ విలువ ఎత్తు స్థానాన్ని నిర్ణయిస్తుంది.

ఎడమ మూల భాగం 0 0 ఉంటుంది. ఇకాని యూనిట్లు పిక్సెల్స్ (0px 0px) లేదా ఏదైనా ఇతర CSS యూనిట్లు కావచ్చు.

మాత్రమే ఒక విలువను సూచించినట్లయితే, మరొక విలువ 50% గా ఉంటుంది.

ప్రత్యేకంగా % మరియు స్థానాన్ని కలిపి ఉపయోగించవచ్చు.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. ఈ లింక్ ను సందర్శించండి: initial。
inherit ఈ లక్షణాన్ని తన మూల ఎలిమెంట్ నుండి పారంపర్యం చేసుకుంటుంది. ఈ లింక్ ను సందర్శించండి: inherit。

సాంకేతిక వివరాలు

అప్రమేయ విలువ: 0% 0%
పారంపర్యం: ఏ
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ లింక్ ను సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు。
వెర్షన్: CSS మాస్కింగ్ మొడ్యూల్ లెవల్ 1
జావాస్క్రిప్ట్ సంకేతం: object.style.maskPosition="100px center"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ వెర్షన్ ను సూచిస్తాయి。

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
120 120 53 15.4 106

相关页面

教程：CSS 遮罩

参考：CSS మాస్క్ అట్రిబ్యూట్

参考：CSS మాస్క్-క్లిప్ అట్రిబ్యూట్

参考：CSS మాస్క్-కాంపోజిట్ అట్రిబ్యూట్

参考：CSS మాస్క్-ఇమేజ్ అట్రిబ్యూట్

参考：CSS మాస్క్-మోడ్ అట్రిబ్యూట్

参考：CSS మాస్క్-ఓరిజిన్ అట్రిబ్యూట్

参考：CSS మాస్క్-రీపీట్ అట్రిబ్యూట్

参考：CSS మాస్క్-సైజ్ అట్రిబ్యూట్

参考：CSS మాస్క్-టైప్ అట్రిబ్యూట్