Hisia ya mask-size

Muhtasari na matumizi

mask-size Mafanikio hayafikirika kwa kina ya kumekikwa.

Mfano

Mfano 1

Kumekikwa kwa ukubwa wa picha ya kina (kwa nukuu):

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

Jaribu kwenye mawasiliano

Mfano 2

Kumekikwa kwa ukubwa wa picha ya kina (kwa mita):

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

Jaribu kwenye mawasiliano

Inayotumika kwa Ki-CSS

mask-size: auto|ukubwa|contain|cover|initial|inherit;

Wapya wa mafanikio

Wapya Maelezo
auto Wapya.
ukubwa Kumieleza ukubwa wa mafanikio ya picha ya kumekikwa, inaweza kutumika px, em, au %.
contain Kueneza mafanikio ya picha ya kumekikwa, kumekikwa kwa kufikiria kina na kina ya kina yake.
cover Kueneza mafanikio ya picha ya kumekikwa, kumekikwa kwa kufikiria kina na kina ya kina yake.
initial Kuwasilisha kufikiria hiyo mafanikio kwa muwimbi wake. Angalia: initial.
inherit Kuwanza kufikiria kufikiria hiyo mafanikio kutoka kwa kina yake. Angalia: inherit.

Maelezo ya viwanda

Wapya: auto
Muungano: Haihakunukiwa
Uharibifu: Hakuna muungano. Angalia:Mafanikio ya aniyotumika katika uharibifu.
Mwaka wa: Moduli ya CSS Masking Kiwango cha 1
Inayotumika kwa Ki-JavaScript: object.style.maskSize="100px 200px"

Muungano wa kifunguo cha kifungua

Mafanikio ya jumla ya tablia inaeleza tovuti ya kwanza inayosimamia kufikiria hiyo mafanikio.

Chrome Edge Firefox Safari Opereta
120 120 53 15.4 106

Vingine vya pake

Mafunzo:Mabaki ya CSS

Tazama:Hisia ya mask

Tazama:Hisia ya mask-clip

Tazama:Hisia ya mask-composite

Tazama:Hisia ya mask-image

Tazama:Hisia ya mask-mode

Tazama:Hisia ya mask-origin

Tazama:Hisia ya mask-position

Tazama:Hisia ya mask-repeat

Tazama:Hisia ya mask-type