A clip tulajdonság

A clip tulajdonság lehetővé teszi egy abszolút pozicionált elem vágását, csak a megadott téglalap alakú területet hagyva láthatóban. Az érték a rect függvény segítségével adható meg.

Szintaxis

cssselector {
  clip: rect(top, right, bottom, left) | auto;
}

Képek előkészítése

Tegyük fel, hogy van egy természetről szóló képe, amelyet levágunk:

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

Результат:

Példa

Vágjuk körbe a képet, csak a középső részt hagyva láthatóban:

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

Результат:

Lásd még