clip ගුණය

clip ගුණය මගින් නිරපේක්ෂ ස්ථානගත කරන ලද මූලද්‍රව්‍යයක් කපා දැමීමට ඉඩ සලසයි, නිශ්චිත කොටු ප්‍රදේශය පමණක් දෘශ්‍යමාන වන පරිදි. අගය rect ශ්‍රිතය භාවිතයෙන් ලබා දේ.

වාක්‍ය රීතිය

cssතේරුම් ගන්නා {
  clip: rect(ඉහළ, දකුණ, පහළ, වම) | auto;
}

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

අප සතුව සොබාදහමේ රූපයක් ඇතැයි සිතමු, අපි එය කපා දමන්නෙමු:

html<img src="image.jpg" width="500">

Результат:

උදාහරණය

රූපය කපා දමමු, මධ්‍යම කොටස පමණක් දෘශ්‍යමාන වන පරිදි:

html<div class="container">
  <img class="image" src="image.jpg">
</div>

css.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.image {
  position: absolute;
  clip: rect(50px, 350px, 250px, 50px);
  width: 400px;
  height: 300px;
}

Результат:

තවත් බලන්න