mask ගුණය

mask ගුණය යනු සියලු ආවරණ ගුණ සඳහා කෙටි යෙදුමක් වන අතර මඟින් නිරවුල් කිරීමට හැකිය: පින්තූර-ආවරණයක්, එහි ස්ථානය, ප්‍රමාණය, එකතු කිරීමේ ප්‍රකාරය සහ වෙනත් පරාමිතීන්.

පහත ගුණ සඳහා ගුණ-කෙටි යෙදුමකි: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

වාක්‍ය රීතිය

cssතෝරන්නා {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

මූල්‍යයන්

පින්තූර සූදානම් කිරීම

අප සතුව ස්වභාවයේ පින්තූරයක් ඇතැයි සිතමු, එය අපි කපා දමනු ඇත, සහ හදවතේ සහ ඊතලයේ SVG පින්තූර, ඒවා ඔස්සේ අපි කපා ගනිමු:

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

Результат:

නිදර්ශනය . පින්තූර-ආවරණය

අපගේ පින්තූරය මත හදවත්-ආවරණය යොදමු:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ස්ථානය

වම් ඉහළ කෙළවරේ හදවත්-ආවරණය:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ස්ථානය

දකුණු පහළ කෙළවරේ හදවත්-ආවරණය:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ස්ථානය

වම් පස මධ්‍යයේ හදවත්-ආවරණය:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ස්ථානය

මධ්‍යයේ හදවත්-ආවරණය:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ස්ථානය

වමින් 100px සහ ඉහළින් 200px හදවත්-ආවරණය:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ප්‍රමාණය cover

cover මුල්‍යය මඟින් මූලද්‍රව්‍යය සම්පූර්ණයෙන් ආවරණය කිරීමට ආවරණය පරිමාණ කරයි, අනුපාත රඳවා ගනිමින්. අනුපාත ගැලපෙන්නේ නම් ආවරණයේ කෙළවර කපා දැමිය හැකිය:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ප්‍රමාණය contain

contain මුල්‍යය මඟින් ආවරණය මූලද්‍රව්‍යය තුළ සම්පූර්ණයෙන් ගැලපෙන පරිදි පරිමාණ කරයි, අනුපාත රඳවා ගනිමින්. හිස් ප්‍රදේශ ඉතිරි කළ හැකිය:

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

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

Результат:

නිදර්ශනය . ආවරණයේ ප්‍රමාණය

ස්ථාවර ප්‍රමාණය ආවරණයේ නිශ්චිත මාන සකස් කරයි. උදාහරණයක් ලෙස අපි 50px ප්‍රමාණයේ ආවරණයක් සාදමු:

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

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

Результат:

නිදර්ශනය . පුනරාවර්තනය no-repeat

no-repeat මුල්‍යය ආවරණයේ පුනරාවර්තනය අක්‍රීය කරයි. ආවරණය නිශ්චිත ස්ථානයේ එක් වරක් පමණක් පෙන්වයි:

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

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

Результат:

නිදර්ශනය . පුනරාවර්තනය repeat-x

repeat-x මුල්‍යය ආවරණය තිරස් අක්ෂය ඔස්සේ පමණක් පුනරාවර්තනය කරයි:

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

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

Результат:

නිදර්ශනය . සංයෝජනය add

add මුල්‍යය බහු ආවරණ එකට එක් කරයි (ප්‍රතිඵලය - සියලු ආවරණවල එකතුව):

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

css#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;
}

Результат:

නිදර්ශනය . සංයෝජනය intersect

intersect මුල්‍යය ආවරණවල ඡේදනය වන ප්‍රදේශය පමණක් පෙන්වයි:

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

css#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;
}

Результат:

නිදර්ශනය . සංයෝජනය exclude

exclude මුල්‍යය ඡේදනය නොවන ආවරණවල ප්‍රදේශ පෙන්වයි:

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

css#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;
}

Результат:

නිදර්ශනය . සංයෝජනය subtract

subtract මුල්‍යය පළමු ආවරණයෙන් දෙවැන්න අඩු කරයි. නිදර්ශනය සඳහා එක් හදවත් සාදා එයින් ඊතලය අඩු කරමු:

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

css#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;
}

Результат:

නිදර්ශනය . mask හි විස්තීර්ණ ලිවීම

mask ගුණය, වෙන වෙනම අංග ලෙස ලියන ලද:

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

css#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;
}

Результат:

නිදර්ශනය . පින්තූරය සඳහා SVG

පින්තූරයක් සඳහා ආවරණයක් ලෙස SVG-මූලද්‍රව්‍යය භාවිතා කිරීම

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

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

Результат:

නිදර්ශනය . අතීත රේඛාව සඳහා SVG

අතීත රේඛාවක් සඳහා ආවරණයක් ලෙස SVG-මූලද්‍රව්‍යය භාවිතා කිරීම

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

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

Результат:

මෙයද බලන්න