CSS masking - ﯽﮔﮋﯾﻭ mask-image

فهرست مطالب

    نمایش فهرست مطالب

ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﻥﺁ ﯼﻭﺭ ﺎﺗ ﺪﯿﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﮏﺳﺎﻣ ﻪﯾﻻ ﮏﯾ CSS ﮏﺳﺎﻣ ﺎﺑ

CSS mask-image ﯽﮔﮋﯾﻭ

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﮏﺳﺎﻣ ﮏﯾ mask-image

ﺪﺷﺎﺑ ﺮﯾﻮﺼﺗ ﮏﯾ ﺎﯾ CSS ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ،SVG ﺮﯾﻮﺼﺗ ﮏﯾ ،PNG ﺮﯾﻮﺼﺗ ﮏﯾ ﺪﻧﺍﻮﺗ ﯽﻣ ﮏﺳﺎﻣ ﻪﯾﻻ

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

ﻪﺟﻮﺗ: ﺯﺍ ﻂﻘﻓ ﺎﻫﺮﮔﺭﻭﺮﻣ ﺮﺜﮐﺍ CSS ﺪﻧﺭﺍﺩ ﯽﺋﺰﺟ ﯽﻧﺎﺒﯿﺘﺸﭘ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺩﺮﮐ ﯽﻣ ﺭﺎﮐ ﺪﻧﻮﺸﯿﭘ ﺎﺑ ﻪﮐ ﺍﺭ ﯼﺍ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ -webkit- ﻝﺎﺒﻧﺩ ﻪﺑ ﺩﺍﺪ

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

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﺮﯾﻮﺼﺗ ﮏﯾ ﺯﺍ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﺳﺎﻣ ﺭﺩ ﺭﻮﺒﻋ ﯼﺍﺮﺑ url() ﺭﺍﺪﻘﻣ ﮏﯾ ﺯﺍ ،ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ SVG ﺎﯾ PN

ﯽﮑﺸﻣ .ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻑﺎﻔﺷ ﻪﻤﯿﻧ ﺎﯾ ﻑﺎﻔﺷ ﻪﯿﺣﺎﻧ ﮏﯾ ﺪﯾﺎﺑ ﮏﺳﺎﻣ ﺮﯾﻮﺼﺗ

:ﺩﺮﮐ ﻢﯿﻫﺍﻮﺧ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻣ ﻪﮐ ﺖﺳﺍ (PNG ﺮﯾﻮﺼﺗ ﮏﯾ) ﮏﺳﺎﻣ ﺮﯾﻮﺼﺗ ﺎﺠﻨﯾﺍ ﺭﺩ

W3Schools.com

:ﺖﺳﺍ ﻩﺪﻣﺁ ﺎﯿﻟﺎﺘﯾﺍ ﺭﺩ Cinque Terre ﺯﺍ ﯼﺮﯾﻮﺼﺗ ﺎﺠﻨﯾﺍ ﺭﺩ

Cinque Terre

:ﻢﯿﻨﮐ ﯽﻣ ﻝﺎﻤﻋﺍ ﺎﯿﻟﺎﺘﯾﺍ ،Cinque Terre ﺯﺍ ﺮﯾﻮﺼﺗ ﯼﺍﺮﺑ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﺍﺭ (ﻻﺎﺑ P

Cinque Terre

ﻝﺎﺜﻣ

:ﺖﺳﺍ ﻊﺒﻨﻣ ﺪﮐ ﻦﯾﺍ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

ﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﯾﻮﺼﺗ mask-image ﯽﮔﮋﯾﻭ

ﻪﻧﻮﮕﭼ ﺎﯾ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ mask-repeat ﯽﮔﮋﯾﻭ

ﺮﮕﯾﺩ ﯽﻟﺎﺜﻣ

:ﺪﺷ ﺪﻫﺍﻮﺧ ﺭﺍﺮﮑﺗ ﺎﯿﻟﺎﺘﯾﺍ ،Cinque Terre ﺯﺍ ﺮﯾﻮﺼﺗ ﺮﺳﺍﺮﺳ ﺭﺩ ﮏﺳﺎﻣ ﺮﯾﻮﺼﺗ ،ﻢﯿﻨﮐ ﻑﺬﺣ ﺍ

Cinque Terre

ﻝﺎﺜﻣ

:ﺖﺳﺍ ﻊﺒﻨﻣ ﺪﮐ ﻦﯾﺍ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ ﺯﺍ

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﮏﺳﺎﻣ ﺮﯾﻭﺎﺼﺗ ﻥﺍﻮﻨﻋ ﻪﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﺰﯿﻧ CSS ﯽﻋﺎﻌﺷ ﻭ ﯽﻄﺧ ﺐﯿﺷ

ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

:ﺩﻭﺭ ﯽﻣ (ﻑﺎﻔﺷ) ﻦﯿﯾﺎﭘ ﻪﺑ (ﻩﺎﯿﺳ) ﻻﺎﺑ ﺯﺍ ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﻦﯾﺍ .ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺧ ﺮﯾﻮ

Cinque Terre
 

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺯﺍ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺧ ﺮﯾﻮﺼﺗ ﯼﺍﺮﺑ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﻦﺘﻣ ﻥﺪﻧﺎﺷﻮﭘ ﺎﺑ ﻩﺍﺮﻤﻫ ﯽﻄﺧ ﻥﺎﯾ

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.

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﻦﺘﻣ ﻥﺪﻧﺎﺷﻮﭘ ﺎﺑ ﻩﺍﺮﻤﻫ ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺯﺍ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

ﯽﻋﺎﻌﺷ ﻥﺎﯾﺩﺍﺮﮔ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺧ ﺮﯾﻮﺼﺗ ﯼﺍﺮﺑ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ (ﻩﺮﯾﺍﺩ ﻞﮑﺷ ﻪﺑ) ﯽﻋﺎﻌﺷ ﻥﺎﯾﺩﺍﺮﮔ

Cinque Terre

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ (ﻩﺮﯾﺍﺩ ﮏﯾ) ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﯽﻋﺎﻌﺷ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺯﺍ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺧ ﺮﯾﻮﺼﺗ ﯼﺍﺮﺑ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ (ﯽﻀﯿﺑ ﻞﮑﺷ ﻪﺑ) ﯽﻋﺎﻌﺷ ﻥﺎﯾﺩﺍﺮﮔ

Cinque Terre

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ (ﯽﻀﯿﺑ) ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﺮﮕﯾﺩ ﯽﻋﺎﻌﺷ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺯﺍ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ SVG ﺯﺍ

ﮏﯾ ﻞﺧﺍﺩ ﺭﺩ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ <mask>

:ﻢﯿﻨﮐﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺧ ﺮﯾﻮﺼﺗ ﯼﺍﺮﺑ ﻒﻠﺘﺨﻣ ﮏﺳﺎﻣ ﯼﺎﻫﻪﯾﻻ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ Sorry, your browser does not support inline SVG.

ﻝﺎﺜﻣ

:(ﺖﺳﺍ ﻩﺪﺷ ﻞﯿﮑﺸﺗ ﺚﻠﺜﻣ ﺕﺭﻮﺻ ﻪﺑ) SVG ﮏﺳﺎﻣ ﻪﯾﻻ ﮏﯾ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

ﻝﺎﺜﻣ

:(ﻩﺭﺎﺘﺳ ﮏﯾ ﻥﺍﻮﻨﻋ ﻪﺑ ﻩﺪﺷ ﻞﯿﮑﺸﺗ) SVG ﮏﺳﺎﻣ ﻪﯾﻻ ﮏﯾ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

ﻝﺎﺜﻣ

:(ﯼﺍ ﻩﺮﯾﺍﺩ ﻞﮑﺷ) SVG ﮏﺳﺎﻣ ﻪﯾﻻ ﮏﯾ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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 ﺶﺷﻮﭘ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

:ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ CSS ﮏﺳﺎﻣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﻭﺪﺟ

mask-image

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﮏﺳﺎﻣ ﻪﯾﻻ ﻥﺍﻮﻨﻋ ﻪﺑ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ ﺍﺭ ﯼﺮﯾﻮﺼﺗ

mask-mode

ﺮﯿﺧ ﺎﯾ ﺩﻮﺷ ﯽﻣ ﻪﺘﻓﺮﮔ ﺮﻈﻧ ﺭﺩ ﯽﯾﺎﻨﺷﻭﺭ ﮏﺳﺎﻣ ﮏﯾ ﻥﺍﻮﻨﻋ ﻪﺑ ﮏﺳﺎﻣ ﻪﯾﻻ ﺮﯾﻮﺼﺗ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ

mask-origin

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﮏﺳﺎﻣ ﻪﯾﻻ ﮏﯾ (ﮏﺳﺎﻣ ﺖﯿﻌﻗﻮﻣ ﻪﻘﻄﻨﻣ) ﺍﺪﺒﻣ ﺖﯿﻌﻗﻮﻣ

mask-position

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ (ﮏﺳﺎﻣ ﻪﺑ ﺖﺒﺴﻧ) ﮏﺳﺎﻣ ﻪﯾﻻ ﺮﯾﻮﺼﺗ ﮏﯾ ﻉﻭﺮﺷ ﺖﯿﻌﻗﻮﻣ

mask-repeat

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﮏﺳﺎﻣ ﻪﯾﻻ ﺮﯾﻮﺼﺗ ﺭﺍﺮﮑﺗ ﻩﻮﺤﻧ

mask-size

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﮏﺳﺎﻣ ﻪﯾﻻ ﺮﯾﻮﺼﺗ ﻩﺯﺍﺪﻧﺍ