103 of 313 menu

Mask-ominaisuus

Ominaisuus mask on lyhenne kaikista maskausominaisuuksista ja mahdollistaa seuraavien asetusten määrittämisen: maskikuvan, sen sijainnin, koon, sekoitustilan ja muut parametrit.

On lyhenneominaisuus seuraaville ominaisuuksille: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntaksi

valitsija {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Arvot

Arvo	Kuvaus
`none`	Poistaa maskauksen käytöstä (oletusarvo)
`url()`	Polku maskikuvaan (SVG, PNG)
`linear-gradient()`	Lineaarinen gradientti maskina
`radial-gradient()`	Radiaalinen gradientti maskina
`position`	Maskin sijainti (top, center, 50% 50% jne.)
`size`	Maskin koko (cover, contain, 100px 50px)
`repeat`	Maskin toisto (no-repeat, repeat-x, space)
`mode`	Sekoitustila (alpha, luminance, match-source)
`composite`	Maskien yhdistely (add, subtract, intersect, exclude)

Kuvien valmistelu

Oletetaan, että meillä on luontokuva, jota aiomme käsitellä, ja SVG-kuvia sydämestä ja nuolesta, joita pitkin leikkaamme:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Esimerkki . Maskikuva

Asetetaan sydämen muotoinen maski kuvallemme:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Esimerkki . Maskin sijainti

Sydämen muotoinen maski vasemmassa yläkulmassa:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

Esimerkki . Maskin sijainti

Sydämen muotoinen maski oikeassa alakulmassa:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

Esimerkki . Maskin sijainti

Sydämen muotoinen maski keskellä vasemmalla:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

Esimerkki . Maskin sijainti

Sydämen muotoinen maski keskellä:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

Esimerkki . Maskin sijainti

Sydämen muotoinen maski 100px vasemmalta ja 200px ylhäältä:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

Esimerkki . Maskin koko cover

Arvo cover skaalaa maskin niin, että se peittää elementin kokonaan, säilyttäen mittasuhteet. Voi leikata maskin reunoja, jos mittasuhteet eivät täsmää:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Esimerkki . Maskin koko contain

Arvo contain skaalaa maskin niin, että se mahtuu kokonaan elementtiin, säilyttäen mittasuhteet. Saattaa jättää tyhjiä alueita:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Esimerkki . Maskin koko

Kiinteä koko asettaa maskin tarkat mitat. Tehdään esimerkiksi maski, jonka koko on 50px:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Esimerkki . Toisto no-repeat

Arvo no-repeat poistaa maskin toiston käytöstä. Maski näytetään vain kerran määritetyssä sijainnissa:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

Esimerkki . Toisto repeat-x

Arvo repeat-x toistaa maskin vain vaakasuunnassa:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Esimerkki . Yhdistely add

Arvo add laskee useita maskeja yhteen (tulos on kaikkien maskien yhdistymä):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Esimerkki . Yhdistely intersect

Arvo intersect näyttää vain maskien leikkausalueen:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Esimerkki . Yhdistely exclude

Arvo exclude näyttää maskien alueet, jotka eivät leikkaa toisiaan:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Esimerkki . Yhdistely subtract

Arvo subtract vähentää toisen maskin ensimmäisestä. Tehdään esimerkiksi yksi sydän ja vähennetään siitä nuoli:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Esimerkki . Laajennettu mask-kirjoitus

Mask-ominaisuus kirjoitettuna erillisillä komponenteilla:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Esimerkki . SVG kuvalle

SVG-elementin käyttö maskina kuvalle:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Esimerkki . SVG gradientille

SVG-elementin käyttö maskina gradientille:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Katso myös

ominaisuus mask-position,
määrittää maskin sijainnin suhteessa elementtiin
ominaisuus mask-image,
asettaa kuvan maskiksi
ominaisuus mask-mode,
määrittää kuinka maski vuorovaikuttaa taustan kanssa
ominaisuus mask-size,
määrittää maskin koon
ominaisuus mask-repeat,
määrittää maskin toiston
ominaisuus mask-origin,
määrittää maskin sijaintialueen
ominaisuus mask-clip,
määrittää maskin leikkausalueen
ominaisuus mask-composite,
määrittää kuinka useita maskeja yhdistetään

↑

Suomi▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Käytämme evästeitä verkkosivuston toiminnalle, analytiikalle ja personoinnille. Tietojen käsittely tapahtuu Tietosuojakäytännön mukaisesti.

hyväksy kaikki mukauta hylkää