CSS Mask

Gamit ang CSS mask, maaari mong gumawa ng mask layer at ilagay ito sa elemento upang bahagyang o ganap na itago ang ilang bahagi ng elemento.

katangian ng mask-image

CSS mask-image Ang katangian ay nangangahulugan na ang image ng mask layer.

Ang image ng mask layer ay maaaring maging PNG image, SVG image,Gradient ng CSS o Elementong SVG <mask>.

Suporta ng Browser

Ang numero sa ibabaw ng talahanayan ay nangangahulugan na ang unang bersyon ng browser na ganap na sumusuporta sa katangian.

na may -webkit- Ang numero ng prefix ay nangangahulugan na ang unang bersyon na sumusuporta sa prefix.

Gamitin ang image bilang mask layer

Para sa paggamit ng PNG o SVG image bilang mask layer, gamitin ang url() Ipagkakaloob ang image ng mask layer.

Kailangan na ang mask image ay may transparente o semi-transparente area. Ang black ay nangangahulugan na ganap na transparente.

Ito ang mask image na aaplayin namin (PNG image):

Ito ang image mula sa Italyanong limang bayan ng dagat:

Ngayon, aaplayin ang mask image (ang PNG image sa itaas) bilang mask layer ng image ng Italyanong limang bayan ng dagat:

Ehemplo

Sa ibaba ay ang pinagmulan ng kodigo:

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

Try It Yourself

halimbawa ng paliwanag

mask-image Ang attribute ay nagsasabi kung anong imahe ang gagamitin bilang mask layer ng elemento.

mask-repeat Ang attribute ay nagsasabi kung ang mask image ay mababagtas o paano ito ay mababagtas. Ang halimbawa na no-repeat ay nangangahulugan na ang mask image ay hindi mababagtas (ang mask image ay makikita lamang isang beses).

isa pang halimbawa

kung tinatanggal namin mask-repeat Ang attribute, ang mask image ay mababagtas sa buong imahe ng Wuyuwan:

Ehemplo

Sa ibaba ay ang pinagmulan ng kodigo:

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

Try It Yourself

gumamit ng gradient bilang mask layer

CSS linear at radial gradients ay maaaring gamitin bilang mask image.

halimbawa ng linear-gradient

Dito, gumagamit kami ng linear-gradient bilang mask layer ng imaheng ito. Ang linear-gradient na ito ay mula sa itaas (kulay itim) hanggang sa ibaba (walang kulay):

Ehemplo

gumamit ng linear-gradient bilang mask layer:

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

Try It Yourself

Dito, gumagamit kami ng linear-gradient at text mask bilang mask layer ng imaheng ito:

Ehemplo

gumamit ng linear-gradient at text mask bilang mask layer:

.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);
}

Try It Yourself

halimbawa ng radial-gradient

Dito, gumagamit kami ng radial-gradient (porma ng sirkular) bilang mask layer ng imaheng ito:

Ehemplo

gumamit ng radial-gradient bilang mask layer (sirkular):

.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%);
}

Try It Yourself

Dito, gumagamit kami ng radial gradient (hugis na elipso) bilang mask layer para sa imahe:

Ehemplo

Gumamit ng isa pang radial gradient bilang mask layer (hugis na elipso):

.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%);
}

Try It Yourself

Gumamit ng SVG bilang mask layer

Ang elemento <mask> ng SVG ay puwedeng gamitin sa loob ng SVG graph para gumawa ng mask effect.

Dito, gumagamit kami ng elemento <mask> ng SVG upang gumawa ng iba't ibang mask layer para sa imahe:

Ehemplo

Isang SVG mask layer (porma na tatsulok):

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

Try It Yourself

Ehemplo

Isang SVG mask layer (porma na bituing):

<svg width="600" height="400">
  <mask id="svgmask2">
    <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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Try It Yourself

Ehemplo

Isang SVG mask layer (porma na sirkulo):

<svg width="600" height="400">
  <mask id="svgmask3">
    <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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Try It Yourself