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

Результат:

Ошондой эле караңыз