CSS Masking - maskikuvan ominaisuus

Sisällysluettelo

    Näytä sisällysluettelo

CSS-maskeuksella luot maskikerroksen, joka asetetaan sen päälle elementti piilottaaksesi elementin osia osittain tai kokonaan.

CSS-maski-kuvan ominaisuus

CSS-ominaisuus mask-image määrittää maskin kerros kuva.

Maskikerroksen kuva voi olla PNG-kuva, SVG-kuva, CSS-gradientti tai jokin muu SVG <mask> -elementti.

Selaimen tuki

Huomaa: Useimmissa selaimissa on vain osittainen tuki CSS:lle naamiointi. Sinun tulee käyttää -webkit- etuliitettä standardin lisäksi ominaisuus useimmissa selaimissa.

Alla olevan taulukon numerot osoittavat ensimmäisen selainversion, joka tukee täysin ominaisuutta. Numerot, joita seuraa -webkit- määrittävät ensimmäisen version, joka toimi etuliitteellä.

Property
mask-image 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

Käytä kuvaa maskikerroksena

Jos haluat käyttää PNG- tai SVG-kuvaa maskikerroksena, käytä url()-arvoa maskin välittämiseen kerroskuva.

Maskikuvassa on oltava läpinäkyvä tai puoliläpinäkyvä alue. Musta tarkoittaa täysin läpinäkyvää.

Tässä on maskikuva (PNG-kuva), jota käytämme:

W3Schools.com

Tässä on kuva Cinque Terrestä, Italiasta:

Cinque Terre

Nyt käytämme maskikuvaa (yllä oleva PNG-kuva) maskikerroksena Cinque Terrestä Italiasta tulevalle kuvalle:

Cinque Terre

Esimerkki

Tässä on lähdekoodi:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Esimerkki selitetty

Ominaisuus mask-image määrittää kuvan käytettäväksi elementin maskikerroksena.

Ominaisuus mask-repeat määrittää, jos ja miten maskikuva toistetaan. ei toistoa arvo osoittaa, että maskikuvaa ei toisteta (maskikuva toistuu näytetään vain kerran).

Toinen esimerkki

Jos jätämme pois mask-repeat-ominaisuuden, maskikuva toistetaan koko kuvassa Cinque Terrestä, Italiasta:

Cinque Terre

Esimerkki

Tässä on lähdekoodi:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Käytä liukuvärejä maskikerroksena

CSS:n lineaarisia ja säteittäisiä gradientteja voidaan käyttää myös maskikuvina.

Esimerkkejä lineaarisista gradienteista

Tässä käytämme lineaarigradienttia kuvamme maskikerroksena. Tämä lineaarinen gradientti kulkee ylhäältä (musta) alas (läpinäkyvä):

Cinque Terre
 

Esimerkki

Käytä lineaarista gradienttia maskikerroksena:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Tässä käytämme lineaarista gradienttia yhdessä tekstin peittämisen kanssa kuvamme maskikerroksena:

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

Esimerkki

Käytä lineaarista liukuväriä yhdessä tekstin peittämisen kanssa maskikerroksena:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 20px;
  padding: 20px;
  color: white;
}
.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(img_5terre.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>

</body>
</html>

Esimerkkejä säteittäisistä gradienteista

Tässä käytämme säteittäistä gradienttia (ympyrän muotoista) kuvamme maskikerroksena:

Cinque Terre

Esimerkki

Käytä säteittäistä gradienttia maskikerroksena (ympyrä):

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Tässä käytämme säteittäistä gradienttia (ellipsin muotoista) kuvamme maskikerroksena:

Cinque Terre

Esimerkki

Käytä toista säteittäistä gradienttia maskikerroksena (ellipsinä):

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (an ellipse):</h3>
<div class="mask3">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Käytä SVG:tä maskikerroksena

SVG-elementtiä <mask> voidaan käyttää sisällä SVG-grafiikka peitetehosteiden luomiseen.

Tässä käytämme SVG-elementtiä <mask> luodaksemme eri maskikerroksia kuvallemme:

Sorry, your browser does not support inline SVG.

Esimerkki

SVG-maskikerros (muodostettu kolmiona):

   <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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a triangle):</h3>
<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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Esimerkki

SVG-maskikerros (muodostettu tähdeksi):

   <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="img_5terre.jpg" mask="url(#svgmask2)"></image>
    </svg>

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a star):</h3>
<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="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Esimerkki

SVG-maskikerros (muodostettu ympyröinä):

   <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="img_5terre.jpg" 
    mask="url(#svgmask3)"></image>
</svg>

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as circles):</h3>
<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="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

CSS-suojausominaisuudet

Seuraavassa taulukossa luetellaan kaikki CSS-peiteominaisuudet:

mask-image

Määrittää kuvan, jota käytetään elementin maskikerroksena

mask-mode

Määrittää, käsitelläänkö maskikerroksen kuvaa luminanssimaskina vai alfanaamiona

mask-origin

Määrittää maskikerroksen alkuperäpaikan (maskin sijaintialueen). kuva

mask-position

Asettaa maskikerroksen kuvan aloituspaikan (suhteessa maskiin sijaintialue)

mask-repeat

Määrittää, kuinka maskikerroksen kuva toistetaan

mask-size

Määrittää maskikerroksen kuvan koon