Heim > Web-Frontend > CSS-Tutorial > Ausführliche Erläuterung zu mehreren CSS3-Hintergründen sowie zum Zuschneiden, Positionieren und Größe von Hintergrundbildern

Ausführliche Erläuterung zu mehreren CSS3-Hintergründen sowie zum Zuschneiden, Positionieren und Größe von Hintergrundbildern

黄舟
Freigeben: 2017-05-21 16:34:01
Original
2837 Leute haben es durchsucht

Vor CSS3 konnten wir ein Bild hinzufügen

CSS3 erlaubte uns, mehrere Bilder zu einem Element hinzuzufügen

Mehrere Hintergrundbilder

<p class="demo"></p>
Nach dem Login kopieren
.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat;}
Nach dem Login kopieren


Mehrere Hintergründe Sie können dem Hintergrundattribut mehrere Bildressourcen hinzufügen, diese durch Kommas trennen
und dann verwenden Hintergrundposition, um sie an der gewünschten Stelle zu positionieren

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) no-repeat 400px 0;}
Nach dem Login kopieren


Wenn keine Wiederholung festgelegt ist, überschreiben die Bildressourcen unten die Bildressourcen oben

Startposition des BildesHintergrundursprung

Hintergrundursprung ermöglicht es uns zu definieren, wo das Bild positioniert werden soll
optionaler AttributwertPadding-Box ( default), border-box, content-box;
padding-box default image beginnt mit padding
Wir können padding hinzufügen, um dies zu beweisen

.demo {    width: 600px;    height: 200px;    border: 20px solid gray/*改*/;    padding: 20px/*增*/;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) no-repeat 400px 0;}
Nach dem Login kopieren

[Hinweis: CSS kann nicht kommentiert werden. Ich kommentiere auf diese Weise zum Zweck der Hervorhebung vom Rand


Modifiziert in Border-Box haben wir festgestellt, dass ein Teil des Bildes am unteren Rand der grauen Hintergrundfarbe blockiert war

kann eigentlich als Rand verstanden werden , es sollte über dem Element
.demo {    width: 600px;    height: 200px;    border: 20px solid gray;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) no-repeat 400px 0;    background-origin: border-box/*增*/;}
Nach dem Login kopieren


content-box aus dem Inhaltsteil des Elements als Startposition


.demo {    width: 600px;    height: 200px;    border: 20px solid gray;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) no-repeat 400px 0;    background-origin: content-box/*改*/;}
Nach dem Login kopieren
Bildzuschnitt<🎜 definiert werden >Hintergrund -Clip


Obwohl unsere Startposition auf den Inhaltsbereich festgelegt ist

, bedeutet dies nicht, dass unser Bild auf den Inhaltsbereich beschränkt ist

Es kann im gesamten verwendet werden Elementrand und innerhalb des Randes Das gezeichnete kann leicht geändert werden und der obige Code beweist dies




Es gibt also eine Möglichkeit, den Bildbereich festzulegen display?

Dies wird verwendet. Unser Attribut „background-clip“
.demo {    width: 600px;    height: 200px;    border: 20px solid transparent/*改*/;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;)/*删掉no-repeat 默认repeat*/ 400px 0;    background-origin: content-box;}
Nach dem Login kopieren
ähnelt dem Attributwert von content-origin

, einschließlich padding-box (Standard), border-box, content-box Bildanzeigebereich, als ob es zugeschnitten wäre




Auf diese Weise wird der überschüssige Teil des Bildes nicht sichtbar sein

.demo {    width: 600px;    height: 200px;    border: 20px solid transparent;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) 400px 0;    background-origin: content-box;    background-clip: content-box/*增*/;}
Nach dem Login kopieren
Das Bildzuschneideattribut in unserem Webkit hat auch einen besonderen Attributwert. Es ist Text

, was bedeutet, dass das Hintergrundbild auf den Text beschränkt ist und Textfüllfarbe einen einzigartigen Maskentexteffekt bilden kann über




Bildgröße

Hintergrundgröße
<p class="demo">某科学的超电磁炮</p>  <--添加内容
Nach dem Login kopieren
.demo {    width: 600px;    height: 200px;    border: 20px solid transparent;    padding: 20px;    background: url(&#39;1.png&#39;) no-repeat,                url(&#39;2.png&#39;) no-repeat 200px 0,                url(&#39;3.png&#39;) 400px 0;    background-origin: content-box;    -webkit-background-clip: text;/*增*/
    -webkit-text-fill-color: transparent;/*增*/
    font: 75px/200px bold;/*增*/}
Nach dem Login kopieren

Zurück zu einem unserer BilderDer Hintergrund Mit dem Attribut -size können wir die Größe des Bildes steuern

Schreiben Sie beispielsweise zwei Ein Pixelwert steuert die Breite und Höhe

Das Schreiben eines Pixelwerts bedeutet, dass der Breite und Höhe der Pixel sind gleich
Natürlich kann es auch in Prozentform geschrieben werden

.demo {/*新*/
    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat;    background-size: 180px 140px;}
Nach dem Login kopieren
Darüber hinaus gibt es zwei Schlüsselwörter: cover und include

cover deckt den gesamten Bereich ab. In unserem Beispiel soll die Breite die volle



enthalten, damit das Bild im maximalen Bereich angezeigt wird wird voll sein

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url(&#39;1.png&#39;) no-repeat;    background-size: cover/*改*/;}
Nach dem Login kopieren


Der Inhalt des CSS3-Hintergrundbilds ist ungefähr Das ist es

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zu mehreren CSS3-Hintergründen sowie zum Zuschneiden, Positionieren und Größe von Hintergrundbildern. 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