„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 der Hintergrundursprung wird verwendet, um die Referenzposition für die Hintergrundpositionsberechnung zu bestimmen.
Die Syntax lautet:
Hintergrundclip: [Rahmen |. Polsterung] [, [Rahmen | Polsterung]]* |
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 Hintergrundbilder vorhanden sind, werden die entsprechenden Hintergrundclipwerte durch Kommas getrennt.
Für Hintergrund-Ursprung:
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 Attribute erscheinen nur in CSS3. Wie sieht es mit dem Standardverhalten im Hintergrundmodul aus, wenn dieses Attribut nicht verwendet wird?
| Der Standardwert für „background-clip“ lautet etwa „background-clip:border“. Der Standardwert für „background-origin“ lautet etwa „background-origin:padding“. |
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;
Der Hintergrund von hasLayout-Elementen (plus Schaltflächen usw.) entspricht: background-clip:padding;
Dieses Paar CSS3-Eigenschaften wurde in Browsern wie Mozilla, Safari 3 und Konqueror implementiert, sie werden jedoch alle durch ihre privaten Eigenschaften ausgedrückt.
Die privaten Attribute grundlegender Nicht-IE-Browser beginnen normalerweise mit -xxx-, -o- ist privat für Opera mit Presto als Engine, -icab- ist privat für iCab und -khtml- ist der Browser mit KHTML als Engine. (wie Konqueror Safari), -moz- ist ein Browser, der auf der Gecko-Engine von Mozilla basiert (wie Firefox, Mozilla), -webkit- ist ein Browser (wie Safari, Swift), der auf der Webkit-Rendering-Engine (einem Derivat von KHTML) basiert ).
Das heißt, die unterstützten privaten Attribute sind:
| -moz-Hintergrundclip -webkit-Hintergrundclip -khtml-Hintergrundclip -moz-Hintergrund-Ursprung -Webkit-Hintergrund-Ursprung -khtml-Hintergrund-Ursprung |
Hier ist ein einfaches Beispiel für die Verwendung des Attributs „background-origin“. Der Effekt ist wie folgt:
HTML-Code:
CSS-Code:
Taste { border:3px double #95071b;/*Verwenden Sie einen 3px-Doppelrahmen, um die weiße Linie im Design zu simulieren*/ Hintergrundfarbe:#95071b; /*Hintergrundzuschneidemethode und Hilfslinien festlegen*/ -moz-background-origin:padding; /*Vorwärtskompatibel*/ Farbe:#fff; /*Höhenproblem unter IE6 beheben*/ |
Nachteile: Dieser Effekt kann unter Opera nicht erreicht werden. Dies ist natürlich nur eine Lösung für diejenigen, die von HTML-Code besessen sind (beschränkt auf das Erlernen und Verstehen der Attribute „background-clip“ und „background-origin“). Natürlich können Sie auch andere Methoden ausprobieren, die CSS möglicherweise prägnanter machen Was die Vorteile verschiedener Methoden angeht, müssen Sie die Nachteile abwägen.