CSS clip eigenschap

Definitie en gebruik

clip-eigenschap snijdt absolute positioneerde elementen af.

Wat gebeurt er als de grootte van een afbeelding groter is dan het element dat het bevat? De "clip"-eigenschap laat u een zichtbare afmeting van een element specificeren, zodat dit element wordt afgesneden en weergegeven in deze vorm.

Uitleg

Deze eigenschap wordt gebruikt om een snijcijfer te definiëren. Voor een absoluut gedefinieerd element zijn alleen de inhoud binnen dit snijcijfer zichtbaar. Inhoud buiten dit snijcijfer wordt afgehandeld op basis van de waarde van overflow. Het snijcijfer kan groter zijn dan het inhoudsgebied van het element, maar ook kleiner.

Zie ook:

CSS tutorial:CSS positionering

HTML DOM referentiemanual:clip-eigenschap

voorbeeld

Beeld insnijden:

img
  {
  positie:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Probeer het zelf

CSS syntax

clip: auto|vorm|initial|inherit;

eigenschapswaarde

waarde beschrijving
vorm Elementvorm instellen. De enige geldige vormwaarde is: rect (bovenkant, rechts, onderkant, links)
auto Standaardwaarde. Geen snijding toe te passen.
inherit Het wordt voorgeschreven dat de waarde van de clip-eigenschap van het ouder-element moet worden geërfd.

Technische details

Standaardwaarde: auto
Inheritantie: nee
Versie: CSS2
JavaScript syntax: object.style.clip="rect(0px,50px,50px,0px)"

Meer voorbeelden

Elementvorm instellen
Dit voorbeeld demonstreert hoe je de vorm van een element instelt. Dit element wordt ingesneden in de vorm en vervolgens weergegeven.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0