Die CSS-Eigenschaft clip ermöglicht es einem Rechteck, ein positioniertes Element zu schneiden. Das Rechteck wird als vier Koordinaten angegeben: oben, rechts, unten, links. Die Werte von oben und unten geben Offsets vom inneren oberen Rand des Rahmens an, während die Werte von rechts und links Offsets vom inneren linken Rand des Rahmens angeben. Alle vier Seiten können entweder den Wert auto oder shape haben. "Auto" ist der Standardwert.
| Anfangswert | auto |
| Gilt für | "Absolut" positionierte Elemente |
| Geerbt | Nein |
| Animierbar | Ja, Background-color ist animierbar. |
| Version | CSS2 |
| DOM Syntax | object.style.clip = "rect(10px,40px,40px,10px)"; |
Syntax
clip: auto | shape | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
</body>
</html>Im folgenden Beispiel schneidet das Rechteck das Bild entsprechend den eingestellten Werten ein.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
position: absolute;
clip: rect(0px,70px,200px,0px);
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Es schneidet kein Element. Das ist der Defaultwert. |
| shape | Clipsen eines Elements. Der einzige gültige Wert ist: rect (oben, rechts, unten, links). |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | 12.0+ | 1.0+ | 1.0+ | 7.0+ |
Übe dein Wissen
Welche der folgenden Aussagen über die CSS-Eigenschaft 'clip' ist/sind korrekt?
Richtig!
Falsch!