Wie unterscheidet man Hintergrundclip und Hintergrundursprung in CSS3 (Codebeispiel)?

In diesem Kapitel erfahren Sie, wie Sie in CSS3 zwischen Hintergrundclip und Hintergrundursprung unterscheiden können. (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

In CSS3 haben „background-clip“ und „background-origin“ ungefähr die gleichen Funktionen, es gibt jedoch einige subtile Unterschiede.

1. Hintergrundclip-Attribut

Hintergrundclip: Gibt den Zeichenbereich des Hintergrunds an Die Anzeigemethode ist unterschiedlich. Es hat 3 Attribute: Border-Box, Padding-Box, Content-Box.

1 Border-Box: Der Hintergrund wird vom Rand aus gezeichnet, aber wenn der Hintergrund ein Bild ist, wird er auf dem gezeichnet links und oben ist kein Bild gezeichnet, dafür aber eines unten und rechts; >

2. Füllfeld: Der Hintergrund wird innerhalb des Rahmens gezeichnet (ohne Rand);

3. Der Hintergrund wird aus dem Inhaltsteil gezeichnet;

2. Attribut „Hintergrundursprung“

Hintergrundursprung: Gibt den Positionierungsbereich des Hintergrundbilds an. Zu seinen Attributen gehören auch Border-Box, Padding-Box und Content-Box. Bitte beachten Sie jedoch, dass die Beschreibung „Hintergrundbild“ lautet. Es wird gesagt, dass es nur Stiloperationen für den Hintergrund ausführen kann. Dies entspricht der Position, die den Bereich angibt, in dem das Bild gezeichnet wird Dies entspricht nur der Festlegung, wo die obere linke Ecke des Bildes beginnt, und ist nicht für den Rest verantwortlich Hintergrund-Ursprung: Beim Zeichnen eines Bildes können Sie am Rand beginnen, aber einige Inhalte werden möglicherweise vom Rand verdeckt, wie im zweiten Bild oben

Das obige ist der detaillierte Inhalt vonWie unterscheidet man Hintergrundclip und Hintergrundursprung in CSS3 (Codebeispiel)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!