Eine kurze Analyse der CSS-Clip-Eigenschaften

Das Clip-Attribut ist ein relativ nützliches Attribut, kommt aber in praktischen Anwendungen oft selten vor und 52CSS.com führt nur sehr wenige davon ein. Bei der Anwendung des Clip-Attributs sind zwei Punkte zu beachten:
1. Das Clip-Attribut muss zusammen mit dem Positionierungsattribut postion verwendet werden, damit es wirksam wird.
2. Die Berechnungskoordinaten des Clip-Zuschneidens werden ausgehend von der oberen linken Ecke, also dem (0,0)-Punkt, berechnet, wie in Abbildung 3 dargestellt. Dies unterscheidet sich vom Abstand und vom unteren Rand beider Sie beginnen am äußersten rechten Punkt und werden von unten gezählt.

Grundlegende Syntax des Clip-Attributs:


Beschreibung des Clip-Attributs:
Ruft den sichtbaren Bereich eines Objekts ab oder legt ihn fest. Teile außerhalb des Sichtbereichs sind transparent.
Diese Eigenschaft definiert die Größe des sichtbaren Bereichs eines absolut positionierten Objekts. Der Wert der Positionseigenschaft muss auf „absolut“ gesetzt werden, damit diese Eigenschaft verwendet werden kann.
Diese Eigenschaft ist auf MAC-Plattformen ab IE5 verfügbar.
Die entsprechende Skripteigenschaft ist clip .
Das Clip-Attribut in CSS kann nicht nur farbigen Text erstellen, sondern auch Elemente auf anderen Webseiten effektiv zuschneiden.

Das Clip-Attribut legt die Form des Elements fest. Diese Eigenschaft wird verwendet, um ein Beschneidungsrechteck zu definieren. Nur der Inhalt innerhalb dieses Rechtecks ​​ist sichtbar, und der Inhalt außerhalb dieses Beschneidungsbereichs hat den gleichen Effekt wie overflow:hidden. Der Beschneidungsbereich kann größer oder kleiner als der Inhaltsbereich des Elements sein.
Clip-Attributwert: auto |. rect (oben, rechts, unten, links)
Auto bedeutet kein Zuschneiden. Die vier Richtungen im Rechteck sollten mit numerischen Werten gefüllt sein, die die Position des Zuschneidens angeben.
Im Folgenden gebe ich ein einfaches Beispiel für das Zuschneiden eines Bildes.
Bereiten Sie zunächst ein Bild vor (siehe Abbildung 1). Die Größe beträgt 159 Pixel * 99 Pixel. Ich habe vor, das Clip-Attribut zu verwenden, um das Bild so zuzuschneiden, dass nur der große rote Punkt im Bild angezeigt wird.
Ich erstelle zunächst einen Div-Rahmen, um das Bild zu platzieren. Sein CSS ist wie folgt definiert:


Das Positionierungsattribut dieses Div ist auf relative Positionierung eingestellt, um es als Positionierungsstandard für das Bild zu verwenden. Der Hintergrund ist als #FFF985 definiert, um den Anzeigeeffekt deutlicher zu machen.
Definieren Sie dann die Zuschneideeigenschaften des Bildes. Die CSS-Definition lautet wie folgt:


Die absolute Positionierung erfolgt hier relativ zum Div mit der ID von imgClip. Die Werte im Clip sind in der Reihenfolge oben, rechts, unten und links angeordnet.
HTML-Code: