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

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

mask అటువంటి లక్షణం మాస్క్ ద్వారా లేదా కట్టింగ్ ద్వారా చిత్రాన్ని (పాక్షికంగా లేదా పూర్తిగా) మరచిపోచేందుకు ఉపయోగించబడుతుంది。

mask అటువంటి లక్షణాలు క్రింది లక్షణాల సరళీకృత రూపంలో ఉన్నాయి:

ఇన్స్టాన్స్

ఉదాహరణ 1

చిత్రానికి మాస్క్ సృష్టించండి:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

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

ఉదాహరణ 2

చిత్రానికి వేరే మాస్క్ సృష్టించడానికి సమాంతర మరియు వైకల్పిక గ్రేడియంట్లను ఉపయోగించండి:

.mask1 {
  mask: linear-gradient(black, transparent);
}
.mask2 {
  mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

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

ఉదాహరణ 3

సివ్విగ్ విజువల్ మాస్క్ ఎలమెంట్ ఉపయోగించి చిత్రానికి మాస్క్ ప్రాతిపదిక సృష్టించండి:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

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

ఉదాహరణ 4

సివ్విగ్ విజువల్ మాస్క్ ఎలమెంట్ ఉపయోగించి చిత్రానికి మాస్క్ ప్రాతిపదిక సృష్టించండి:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

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

CSS సంకేతాలు

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

లక్షణ విలువ

విలువ వివరణ
mask-image ఎలమెంట్ మాస్క్ ప్లేయర్ గా వాడిన చిత్రాన్ని నిర్దేశించండి. అప్రమేయ విలువ none గా ఉంటుంది。
mask-mode

మాస్క్ ప్లేయర్ చిత్రాన్ని లైట్ మాస్క్ గా లేదా alpha మాస్క్ గా ఎంచుకోండి。

అప్రమేయ విలువ match-source గా ఉంటుంది。
mask-repeat

మాస్క్ చిత్రం ఎలా/ఎంత పునరావృతం అవుతుందో నిర్దేశించండి。

అప్రమేయ విలువ repeat గా ఉంటుంది。
mask-position

మాస్క్ చిత్రం ప్రారంభ స్థానాన్ని (మాస్క్ స్థాన ప్రాంతానికి సంబంధించి) నిర్దేశించండి。

అప్రమేయ విలువ 0% 0% గా ఉంటుంది。
mask-clip

మాస్క్ చిత్రం ప్రభావిత ప్రాంతాన్ని నిర్దేశించండి。

అప్రమేయ విలువ బోర్డర్-బాక్స్ గా ఉంటుంది。
mask-origin

మాస్క్ ప్లేయర్ చిత్రం ప్రారంభ స్థానాన్ని (మాస్క్ స్థాన ప్రాంతం) నిర్దేశించండి。

అప్రమేయ విలువ బోర్డర్-బాక్స్ గా ఉంటుంది。
mask-size

మాస్క్ ప్లేయర్ చిత్రం పరిమాణాన్ని నిర్దేశించండి。

అప్రమేయ విలువ ఆటో (auto) గా ఉంటుంది。
mask-composite

ప్రస్తుత మాస్క్ ప్లేయర్ మరియు క్రింది మాస్క్ ప్లేయర్ వాడే కంపోజిషన్ కార్యకలాపాన్ని నిర్దేశించండి。

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

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

అప్రమేయ విలువ: none match-source repeat 0% 0% border-box border-box auto add
పారంపర్యం కార్యకలాపం: ఏ
అనిమేషన్ నిర్మాణం: మద్దతు లేదు. దయచేసి ఈ కు పరిగణించండి:అనిమేషన్ సంబంధిత లక్షణాలు。
వెర్షన్: CSS మాస్కింగ్ మొడ్యూల్ లెవల్ 1
జావాస్క్రిప్ట్ సంకేతాలు: object.style.mask="url(star.svg)"

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

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

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

相关页面

教程：CSS 遮罩

పరిచయం లో ఉంది:CSS మాస్క్ అట్రిబ్యూట్

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

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

పరిచయం లో ఉంది:CSS మాస్క్-ఇమేజ్ అట్రిబ్యూట్

పరిచయం లో ఉంది:CSS మాస్క్-మోడ్ అట్రిబ్యూట్

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

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

పరిచయం లో ఉంది:CSS మాస్క్-రీపీట్ అట్రిబ్యూట్

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

పరిచయం లో ఉంది:CSS మాస్క్-టైప్ అట్రిబ్యూట్