Mfano wa mask wa CSS

Kwenye upelele Kuanzia mbele
Mbele ya upelele mask-clip

Muhtasari na matumizi

mask Mafanikio huitumia kumekaa mawili ya kina au kifungu cha picha (kiasi cha kikamilifu au kiasi cha kina) kwa kumekaa elementi.

mask Mafanikio ni muhimu wa mafanikio yafuatavyo:

Mfano

Mfano 1

Tumia mawili ya picha:

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

Tenda kwa urahisi

Mfano 2

Tumia mafanikio ya uharibifu na uharibifu wa jumla kumekaa mawili ya picha:

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

Tenda kwa urahisi

Mfano 3

Tumia SVG <mask> kina kumekaa mawili ya picha:

<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>

Tenda kwa urahisi

Mfano 4

Tumia SVG <mask> kina kumekaa mawili ya picha:

<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>

Tenda kwa urahisi

Inayotumika kiingilizi cha CSS

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

Chaguo cha tabia

Chaguo	Kutaja
mask-image	Kutaja picha inayotumika kama kikuu cha kumgoma wa elementi. Chaguo cha kuzingatia ni none.
mask-mode	Kutaja kwamba picha ya kumgoma inayotakiwa inaingia kama kikuu cha kumgoma cha muhimu au kikuu cha alpha kwa kumgoma. Chaguo cha kuzingatia ni match-source.
mask-repeat	Kuweka picha ya kumgoma inayotaka kuwa na uharibifu au kama. Chaguo cha kuzingatia ni repeat.
mask-position	Kuweka chanzo cha picha ya kumgoma (kutoka kwa eneo la kumgoma). Chaguo cha kuzingatia ni 0% 0%.
mask-clip	Kutaja eneo la picha ya kumgoma inayotaka kuwa na uharibifu. Chaguo cha kuzingatia ni border-box.
mask-origin	Kutaja chanzo cha picha ya kumgoma (eneo la kumgoma). Chaguo cha kuzingatia ni border-box.
mask-size	Kutaja ukubwa wa picha ya kumgoma. Chaguo cha kuzingatia ni auto.
mask-composite	Kutaja operesheni ya kusaidia kwenye kikuu cha kumgoma na kikuu cha chini cha kumgoma. Chaguo cha kuzingatia ni add.
initial	Kuweka tabia hii kwa chaguo cha kuzingatia. Angalia initial.
inherit	Kumwambia tabia hii kusambaa kutoka kwa elementi yake ya mbinguni. Angalia inherit.

Maadili ya teknolojia

Chaguo cha kuzingatia:	none match-source repeat 0% 0% border-box border-box auto add
Uangalifu:	Hapana
Tengeneza mawingu:	Hakuna. Angalia:Jamii ya sababu za hali ya mawingu.
Safina:	CSS Masking Module Level 1
Inayotumika kiingilizi cha JavaScript:	object.style.mask="url(star.svg)"