Eigenschap clip

De eigenschap clip maakt het mogelijk een absoluut gepositioneerd element bij te snijden, waarbij alleen het opgegeven rechthoekige gebied zichtbaar blijft. De waarde wordt opgegeven met behulp van de functie rect.

Syntaxis

cssselector {
  clip: rect(boven, rechts, onder, links) | auto;
}

Voorbereiding van afbeeldingen

Stel we hebben een natuurafbeelding die we gaan bijsnijden:

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

Результат:

Voorbeeld

Laten we de afbeelding bijsnijden, zodat alleen het centrale deel zichtbaar blijft:

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

Результат:

Zie ook