mask-origin ගුණය

mask-origin ගුණය මුහුණත පිහිටුවීම සඳහා ආරම්භක ලක්ෂ්‍යය සකසයි. මූලද්‍රව්‍යයේ කුමන කොටසකට සාපේක්ෂව (යාබද සීමාව, පැඩිං හෝ අන්තර්ගතය) මුහුණත ස්ථානගත කරනු ඇත්දැයි එය නිර්වචනය කරයි.

වාක්‍ය රචනා ක්‍රමය

cssතෝරන්නා {
  mask-origin: content-box | padding-box | border-box;
}

අගයන්

නිදර්ශනය . border-box

මුහුණත මූලද්‍රව්‍යයේ සීමාවට සාපේක්ෂව ස්ථානගත වේ:

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

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: border-box;
}

Результат:

නිදර්ශනය . padding-box

මුහුණත පැඩිං ප්‍රදේශයට සාපේක්ෂව ස්ථානගත වේ:

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

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: padding-box;
}

Результат:

නිදර්ශනය . content-box

මුහුණත අන්තර්ගතයට සාපේක්ෂව ස්ථානගත වේ:

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

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: content-box;
}

Результат:

මෙයද බලන්න