Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2018-09-14 16:58:23
Original
1566 Leute haben es durchsucht

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 Wie unterscheidet man Hintergrundclip und Hintergrundursprung in CSS3 (Codebeispiel)?

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!