Understandng Die CSS Clip-Eigenschaft
Warum will ich das zu verstehen??? Humm ...!!
Die meisten CSS-Autoren würden zustimmen, dass CSS-Clip-Eigenschaft ist wahrscheinlich eines der am meisten unbenutzte CSS-Eigenschaften. Es war so richtig für mich und war sehr glücklich, es zu vernachlässigen, bis ich begann Modifizierung der MooTools ZWEI Knob (Pin) Slider-Komponente (mit Range Indicator) .
Es war ein guter Vorschlag von einem der Komponente Benutzern, die Slider-Komponente mit Hilfe abgeschnitten backgroud Bilder (gegen eine variable Breite Teilung), um den Schieber Sortiment zeigen zu modifizieren. So kam meine Zeit, um den Spaß, aber un-Wirtschaftsprüfer (für mich natürlich) Wasser des CSS-Clip-Eigenschaft eingeben.
Na ja! wie schwierig es sein kann? Nicht viel überhaupt ... YES und NO. Die Syntax, um die CSS-Clip-Eigenschaft verwenden, ist ziemlich aufrecht, aber der Sinn / usuage ist ein bisschen croocked. Mit einem Speicher wie meine, immer wenn ich sitzen auf Nachbesserung auf meinem Slider Script ... Ich habe tokeep Rückbezug auf Nutzung dieses Clip-Eigenschaft, um mich daran erinnern, die Logik, die ich in meinem Skript erstellt .... DAMIT! gedacht, um Stift it down, mit einer Hoffnung zu erinnern, das die Zukunft (und auch zum Nutzen derer, die scheinen hilflos vor einem CSS-Clip-Eigenschaft)
Was bedeutet CSS Clip tun?
Clip ist Teil der visuellen Effekte-Modul von CSS 2.1. Einfach ausgedrückt, ist seine Aufgabe, ein sichtbares Fenster oben auf ein Objekt, das nicht abgeschnitten wird, zu platzieren, damit Clipping Bilder und Thumbnails ohne zusätzliche Dateien (I haben bereits diese Funktion, um eine bessere Nutzung der Slider-Komponente erstellen 
)
Mit dem CSS-Clip-Eigenschaft können Sie einen Ausschnitt mit dem rect Form. Wie viele andere CSS-Eigenschaften (wie margin, padding etc), mit rect erfordert vier Koordinaten Oben, Rechts, Unten, Links (TRBL). Die croocked Natur dieser Eigenschaft entspricht, wenn man einen genaueren Blick auf, wie Clip berechnet die Clipping-Region zu nehmen, mit diesen vier Koordinaten (sendet Gehirn in einen für eine Weile zu werfen). Nun, Sie zu verwirren beginnt der Boden von oben und die rechte von der linken Seite beginnt. . Du siehst, was ich gesagt habe? .... Damit dieser Beitrag ...
Dieses kleine Verwirrung kann leicht verschwinden, die mit diesem visuellen Erläuterung der CSS-Clip / rect Eigenschaft als unten!!
CSS Clip Bedarf
Die Aufgabe, die wir begonnen haben, ist es, die folgende Thumbnail-Bild in ein quadratischer suchen Bild-Clip (und auch ein Weitwinkel-Bild)
 |  |
| Ursprüngliche Thumbnal / Image | Clip Anforderungen für Sqaure Thumbmail |
CSS Clip Ergebnisse
