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

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

mask-size లక్షణం మాస్క్ లేయర్ చిత్రాన్ని వెడల్పును నిర్దేశిస్తుంది.

ఉదాహరణ

ఉదాహరణ 1

మాస్క్ లేయర్ చిత్రాన్ని వెడల్పు (ప్రతిశతంలో) సెట్ చేయండి:

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

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

ఉదాహరణ 2

మాస్క్ లేయర్ చిత్రాన్ని వెడల్పు (పిక్సెల్స్ వద్ద) సెట్ చేయండి:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

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

CSS సంకేతాలు

mask-size: auto|size|contain|cover|initial|inherit;

లక్షణ విలువ

విలువ వివరణ
auto అప్రమేయ విలువ
size మాస్క్ చిత్రాన్ని విస్తరణను నిర్దేశించండి, px, em మొదలైన అక్షరాంశాలు లేదా % విస్తరణను ఉపయోగించవచ్చు.
contain మాస్క్ చిత్రాన్ని స్కేల్ చేయండి, దాని వెడల్పు మరియు పొడవు కన్నా కంటైనర్ లోపల సరిపోయేటట్లు చేయండి.
cover మాస్క్ చిత్రాన్ని స్కేల్ చేయండి, దాని వెడల్పు మరియు పొడవు కన్నా కంటైనర్ ను కవర్ చేయండి.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. దయచేసి ఈ కి ముందుకు చూడండి: initial。
inherit ఈ లక్షణాన్ని తన ముందటి అంశం నుండి పారంపర్యం చేసుకుంది. దయచేసి ఈ కి ముందుకు చూడండి: inherit。

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

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

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

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

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

సంబంధిత పేజీలు

ట్యూటోరియల్:CSS మాస్క్

సూచనలు:CSS మాస్క్ అట్రిబ్యూట్

సూచనలు:CSS మాస్క్-క్లిప్ అట్రిబ్యూట్

సూచనలు:CSS మాస్క్-కాంపోజిట్ అట్రిబ్యూట్

సూచనలు:CSS మాస్క్-ఇమేజ్ అట్రిబ్యూట్

సూచనలు:CSS మాస్క్-మోడ్ అట్రిబ్యూట్

సూచనలు:CSS మాస్క్-ఓరిజిన్ అట్రిబ్యూట్

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

సూచనలు:CSS మాస్క్-రిపీట్ అట్రిబ్యూట్

సూచనలు:CSS మాస్క్-టైప్ అట్రిబ్యూట్