CSS3-Tutorial: Hintergrundclip und Hintergrundursprung

Originaltext: http://www.planabc.net/2008/04/14/Hintergrundclip_Hintergrundursprung/ „background-clip“ und „background-origin“ sind neue Hintergrundmoduleigenschaften, die in CSS3 hinzugefügt wurden und zur Bestimmung der Positionierung des Hintergrunds verwendet werden. Mit dem Hintergrundclip wird ermittelt, ob der Hintergrund den Randbereich enthält. Und background-or
Originaltext: http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip und background-origin sind neu hinzugefügte Hintergrundmodulattribute in CSS3 , wird verwendet, um die Positionierung des Hintergrunds zu bestimmen.
Hintergrundclip wird verwendet, um festzustellen, ob der Hintergrund den Randbereich enthält. Und der Hintergrundursprung wird verwendet, um die Referenzposition für die Hintergrundposition-Berechnung zu bestimmen.
Syntax ist: Hintergrundclip: [Rahmen |. Polsterung] [, [Rahmen | Polsterung]]* Hintergrund-Ursprung: [Rahmen |. Polsterung] [, [Rahmen |.

Für Hintergrundclip:
Wenn es sich um einen Füllwert handelt, ignoriert der Hintergrund die Füllkanten und der Rand ist transparent. Wenn es sich um einen Randwert handelt, umfasst der Hintergrund den Randbereich. Wenn mehrere Hintergrundbild-Bilder vorhanden sind, werden die entsprechenden Hintergrundclip-Werte durch Kommas getrennt.
Für Hintergrundursprung:
Wenn es sich um einen Füllwert handelt, ist die Position relativ zur Füllkante („0 0“ ist die obere linke Ecke der Füllkante und „100 „% 100 %“ ist die untere rechte Ecke). Wenn es sich um einen Randwert handelt, bedeutet dies die relative Randkante. Der Randwert ist relativ zum Inhaltsrand. Wie beim Hintergrundclip werden mehrere Werte durch Kommas getrennt. Wenn „background-clip“ der Füllwert, „background-origin“ der Rahmenwert und „background-position“ „top left“ (Standardanfangswert) ist, wird die obere linke Ecke des Hintergrundbilds abgeschnitten.
Diese beiden Eigenschaften erscheinen nur in CSS3. Was ist mit dem Standardverhalten im Hintergrundmodul, das diese Eigenschaft nicht verwendet?
Background-clip ist standardmäßig auf etwas wie „background-clip:border“ eingestellt.
Background-origin ist standardmäßig auf etwas wie „background-origin:padding“ eingestellt.
Aber IE ist ein Sonderfall (es ist scheiße).
In IE6 und IE7 ist der Hintergrund allgemeiner Elemente (außer Schaltflächen usw.) äquivalent zu: background-clip:border; background-origin:border;
Der Hintergrund von hasLayout-Elementen (plus Schaltflächen usw.) ) ist äquivalent In: background-clip:padding; background-origin:padding;
Dieses Paar von CSS3-Eigenschaften wurde in Browsern wie Mozilla, Safari 3 und Konqueror implementiert, sie werden jedoch alle durch ihre privaten Eigenschaften ausgedrückt.
Zitat:
Grundsätzlich beginnen die privaten Eigenschaften von Nicht-IE-Browsern normalerweise mit -xxx-, -o- ist das private Eigentum von Opera mit Presto als Engine, -icab - ist privat für iCab, -khtml- ist ein Browser mit KHTML als Engine (wie Konqueror Safari), -moz- ist ein Browser mit Mozillas Gecko als Engine (wie Firefox, Mozilla), -webkit- wird mit gerendert Webkit Engine (ein Derivat von KHTML) Browser (wie Safari, Swift).
Die unterstützten privaten Attribute sind: moz-Hintergrundclip Webkit-Hintergrundclip khtml-Hintergrundclip moz-hintergrund-ursprung Webkit-Hintergrund-Ursprung khtml-Hintergrund-Ursprung

Das obige ist der detaillierte Inhalt vonCSS3-Tutorial: Hintergrundclip und Hintergrundursprung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!