Savybė clip

Savybė clip leidžia apkirsti absoliučiai pozicionuotą elementą, paliekant matomą tik nurodytą stačiakampę sritį. Reikšmė nurodoma naudojant funkciją rect.

Sintaksė

cssselektorius {
  clip: rect(viršus, dešinė, apačia, kairė) | auto;
}

Vaizdų paruošimas

Tarkime, kad turime gamtos vaizdą, kurį mes apkirsime:

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

Результат:

Pavyzdys

Apkarpykime vaizdą, palikdami matomą tik centrinę dalį:

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

Результат:

Taip pat žiūrėkite