CSS షేడ్

CSS మాస్క్ ఉపయోగించడంద్వారా, మీరు ఒక మాస్క్ ప్లేయర్ ని సృష్టించి దానిని ఎల్లింటి అంశం పైన పెట్టవచ్చు లేదా పార్టియల్లో కనబడే అంశాలను అద్దగించవచ్చు.

mask-image అంశం

CSS mask-image అంశం మాస్క్ ప్లేయర్ చిత్రాన్ని నిర్దేశిస్తుంది.

మాస్క్ చిత్రం PNG చిత్రం, SVG చిత్రం లేదాCSS 渐变 లేదా SVG <mask> అంశం.

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

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

తో -webkit- ప్రత్యేకతలు కలిగిన సంఖ్యలు ఈ ప్రత్యేకతలను మద్దతుగా అనుమతిస్తున్న మొదటి వెబ్ బ్రౌజర్ వెర్షన్ ను సూచిస్తాయి.

చిత్రాన్ని మాస్క్ ప్లేయర్ గా ఉపయోగించండి

PNG లేదా SVG చిత్రాన్ని మాస్క్ ప్లేయర్ గా ఉపయోగించడానికి, ఈ ఉపయోగించండి: url() మాస్క్ ప్లేయర్ చిత్రాన్ని విలువను పాస్ చేయండి.

మాస్క్ చిత్రంలో పారదర్శకత లేదా పారదర్శకతగల ప్రాంతాలు ఉండాలి. కాళ్ళు పూర్తిగా పారదర్శకం అని అర్థం వస్తుంది.

ఇది మేము ఉపయోగించే మాస్క్ చిత్రం (PNG చిత్రం):

ఇది ఇటాలియన్ పాంటోనీ నుండి వచ్చిన చిత్రం:

ఇప్పుడు, మేము మాస్క్ చిత్రాన్ని (పైని PNG చిత్రాన్ని) ఇటాలియన్ పాంటోనీలోని చిత్రానికి మాస్క్ ప్లేయర్ గా ఆపాదిస్తాము:

ప్రతిమా రూపం

以下是源代码：

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

亲自试一试

例子解释

mask-image 属性指定用作元素遮罩层的图像。

mask-repeat 属性指定遮罩图像是否重复或如何重复。no-repeat 值表示遮罩图像不会重复（遮罩图像只会显示一次）。

另一个实例

如果我们省略 mask-repeat 属性，遮罩图像将重复显示在整个五渔村图像上：

ప్రతిమా రూపం

以下是源代码：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

亲自试一试

使用渐变作为遮罩层

CSS 线性和径向渐变也可以用作遮罩图像。

线性渐变实例

在这里，我们使用线性渐变作为图像的遮罩层。此线性渐变从顶部（黑色）到底部（透明）：

ప్రతిమా రూపం

使用线性渐变作为遮罩层：

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

亲自试一试

在这里，我们使用线性渐变和文本遮罩作为图像的遮罩层：

ప్రతిమా రూపం

లీనియర్ గ్రాడియంట్ను మరియు టెక్స్ట్ ముస్క్ స్టార్ గా ఉపయోగించండి ముస్క్ స్టార్ గా:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

亲自试一试

స్పర్శక గ్రాడియంట్ ఉదాహరణ

ఇక్కడ, మేము స్పర్శక గ్రాడియంట్ను (గోళాకారంలోని) చిత్రం యొక్క ముస్క్ స్టార్ గా ఉపయోగిస్తాము:

ప్రతిమా రూపం

స్పర్శక గ్రాడియంట్ను ముస్క్ స్టార్ గా ఉపయోగించండి (గోళాకారంలోని):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

亲自试一试

ఇక్కడ, మేము రేడియల్ గ్రేడియంట్ (అయిల్ రూపంలో ఉంది) చిత్రానికి మాస్క్ ఉపయోగించడానికి ఉపయోగిస్తాము:

ప్రతిమా రూపం

మరొక రేడియల్ గ్రేడియంట్ ఉపయోగించి మాస్క్ ఉపయోగించడం (అయిల్ రూపంలో ఉంది):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

亲自试一试

ఎస్విజి మాస్క్ ఉపయోగించడం

ఎస్విజి <mask> అంశం ఎస్విజి గ్రాఫిక్స్ లోపల ఉపయోగించబడవచ్చు, మాస్క్ ప్రభావాన్ని సృష్టించడానికి.

ఇక్కడ, మేము ఎస్విజి <mask> అంశాన్ని ఉపయోగించి చిత్రానికి వివిధ మాస్క్ లను సృష్టిస్తాము:

ప్రతిమా రూపం

ఒక సింగిల్ ఎస్విజి మాస్క్ (త్రికోణం రూపంలో ఉంది):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>

亲自试一试

ప్రతిమా రూపం

ఒక సింగిల్ ఎస్విజి మాస్క్ (స్టార్ రూపంలో ఉంది):

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

亲自试一试

ప్రతిమా రూపం

ఒక సింగిల్ ఎస్విజి మాస్క్ (వక్రత రూపంలో ఉంది):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    
    
  
  

亲自试一试