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

定义和用法

mask-repeat లక్షణం మాస్క్ చిత్రాన్ని ఎలాగైనా పునరావృతం చేస్తుందో లేదా ఎలా చేస్తుందో నిర్ణయిస్తుంది。

అప్రమేయంగా, మాస్క్ చిత్రం ఉన్నత మరియు అడుగున దిశలో పునరావృతం అవుతుంది。

ఉదాహరణ

ఉదాహరణ 1

ఉపయోగించండి mask-repeat: no-repeat; మరియు mask-repeat: repeat;:

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

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

ఉదాహరణ 2

ఉపయోగించండి mask-repeat: round; మరియు mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

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

ఉదాహరణ 3

ఉపయోగించండి mask-repeat: repeat-x; మరియు mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

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

CSS సంకేతాలు

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

లక్షణ విలువ

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

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

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

相关页面

教程：CSS 遮罩

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

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

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

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

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

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

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

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

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