Clip
Legt fest, welcher Teil eines positionierten Objekts sichtbar ist.
Syntax
{ clip: sClip }
Mögliche Werte
sClip
Zeichenfolge, mit der einer der folgenden Werte angegeben oder empfangen wird:
auto |
Standard. Legt fest, dass das gesamte Objekt dargestellt werden soll. |
rect (top right bottom left) |
Die Werte top, right, bottom und left geben die Längenwerte an, die jeweils durch auto ersetzt werden können, sodass der entsprechende Teil nicht ausgeschnitten wird. Der Wert top gibt an, dass alles ausgeschnitten wird, was auf der Y-Achse über diesem Wert liegt (obere Kante gleich 0). Der Wert right gibt an, dass alles ausgeschnitten wird, was auf der X-Achse über diesem Wert liegt (linke Kante gleich 0). Der Wert bottom gibt an, dass alles ausgeschnitten wird, was auf der Y-Achse unter diesem Wert liegt (obere Kante gleich 0). Der Wert left gibt an, dass alles ausgeschnitten wird, was auf der X-Achse links von diesem Wert liegt (linke Kante gleich 0). |
Diese Eigenschaft hat den Standardwert auto. Sie wird nicht vererbt.
Hinweise
Diese Eigenschaft definiert die Form und die Größe des positionierten Objekts, das sichtbar ist. Die position-Eigenschaft muss auf absolute festgelegt sein. Die Bereiche des Objekts, die sich außerhalb der Ausschnittsfläche befinden, sind transparent. Koordinaten können durch den Wert auto ersetzt werden, der dann die jeweilige Seite darstellt (d. h., die Seite wird nicht ausgeschnitten).
Die Reihenfolge der Werte clip:rect(0 0 50 50) macht das gerenderte Objekt unsichtbar, da die obere und die rechte Position der Ausschnittsfläche auf 0 festgelegt sind. Für einen 50 x 50 Pixel großen Ansichtsport verwenden Sie clip:rect(0 50 50 0).
Die clip-Eigenschaft ist ab Microsoft Internet Explorer 5 auch auf Macintosh-Betriebssystemen verfügbar.
Beispiele
Das folgende Beispiel zeigt, wie eine Inlineformatvorlage verwendet wird, um das Bild auszuschneiden:
<html>
<body>
<div style="position: absolute; top: 0; left: 200; clip: rect(15px auto auto auto);">
<img src="sphere.jpg"/>
</div>
<div style="position: absolute; top: 0; left: 300; clip: rect(auto 15px auto auto);">
<img src="sphere.jpg"/>
</div>
<div style="position: absolute; top: 0; left: 400; clip: rect(auto auto 15px auto);">
<img src="sphere.jpg"/>
</div>
<div style="position: absolute; top: 0; left: 500; clip: rect(auto auto auto 15px);">
<img src="sphere.jpg"/>
</div>
</body>
</html>
Informationen zu Standards
Diese Eigenschaft ist unter Cascading Style Sheets (CSS), Level 2 (CSS2) (möglicherweise in englischer Sprache) definiert.
Gilt für
A, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, HN, HR, I, IFRAME, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OBJECT, OL, P, RUBY, S, SELECT, SPAN, SUB, TABLE, TD, TH, TR, TT, U, UL, VAR, XMP