CSS ausschnitt Eigenschaft
Definition und Verwendung
clip-Eigenschaft beschnitten absolut positionierte Elemente.
Was passiert, wenn die Größe eines Bildes größer als das umgebende Element ist? Das "clip"-Attribut ermöglicht es Ihnen, die sichtbare Größe eines Elements zu definieren, so dass dieses Element beschnitten und in dieser Form angezeigt wird.
Erklärung
Diese Eigenschaft wird verwendet, um einen Ausschnittsrechteck zu definieren. Für ein absolut definiertes Element sind nur die Inhalte im Innenbereich dieses Ausschnitts sichtbar. Inhalte außerhalb dieses Ausschnitts werden gemäß dem Wert von overflow behandelt. Der Ausschnittsraum kann größer oder kleiner als der Inhaltsbereich des Elements sein.
Weitere Informationen:
CSS-Tutorial:CSS-Positionierung
HTML DOM Referenzhandbuch:clip-Eigenschaft
Beispiel
Bildbeschnitt:
img { position:absolute; clip:rect(0px,60px,200px,0px); }
CSS-Syntax
clip: auto|Form|initial|inherit;
Eigenschaftswert
Wert | Beschreibung |
---|---|
Form | Form eines Elements einstellen. Der einzige gültige Wert für die Form ist: rect (oben, rechts, unten, links) |
auto | Standardwert. Es wird keine Kürzung angewendet. |
inherit | Der Wert der clip-Eigenschaft sollte vom übergeordneten Element geerbt werden. |
Technische Details
Standardwert: | auto |
---|---|
Vererbbarkeit: | nein |
Version: | CSS2 |
JavaScript-Syntax: | object.style.clip="rect(0px,50px,50px,0px)" |
Mehr Beispiele
- Form eines Elements einstellen
- Dieses Beispiel zeigt, wie man die Form eines Elements einstellt. Dieses Element wird in die Form geschnitten und dann angezeigt.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 8.0 | 1.0 | 1.0 | 7.0 |