CSS-Hintergrund und Sprites

Dieses Mal bringe ich Ihnen CSS-Hintergründe und Sprites. Was sind die Vorsichtsmaßnahmen bei der Verwendung von CSS-Hintergründen und Sprites?

1. Wie stelle ich die Hintergrundfarbe des Etiketts ein?

Es gibt ein Hintergrundfarbe:-Attribut in CSS, Dies wird speziell verwendet, um den

-Wert der Hintergrundfarbe des Etiketts festzulegen:

Spezifisches Wort rgb rgba hexadezimal

Tastenkombination:

bc Hintergrundfarbe : #fff;

2. Wie stelle ich das Hintergrundbild ein?

In CSS gibt es ein Attribut namens background-image: url( );, das ist die Tastenkombination

, die speziell zum Festlegen des Hintergrundbilds verwendet wird:

bi-Hintergrundbild: url();

Hinweise:

1. Die Adresse des Bildes muss in url() platziert werden. Die Adresse des Bildes kann eine lokale Adresse oder eine Netzwerkadresse sein –
Adresse

2 nicht so groß wie die Größe des Etiketts, dann wird es automatisch horizontal und vertikal gekachelt, um es auszufüllen

3 Wenn sich auf der Webseite ein Bild befindet, sendet der Browser erneut eine Anfrage, um die Daten abzurufen das Bild

3. Hintergrundkachelungsattribut

Es gibt ein background-repeat-Attribut in CSS, das speziell zur Steuerung der Kachelmethode verwendet wird von Hintergrundbildern.

Wert:

Repeat-Standard, erfordert eine horizontale und vertikale Kachelung
No-Repeat erfordert keine horizontale und vertikale Kachelung
repeat-x nur horizontale Kachelung
repeat-y nur vertikal Kachel

Tastenkombination

BGR-Hintergrundwiederholung:

Anwendungsszenario:

Sie können die Größe des reduzieren Bild durch Kacheln des Hintergrundbilds, Verbesserung der Webseitenzugriffsgeschwindigkeit

4. Hintergrundpositionierungsattribut

1. Wie steuere ich die Position des Hintergrundbilds?

Es gibt eine Eigenschaft namens in CSS >background-position: Attribut, das speziell zur Steuerung der Position des Hintergrundbilds verwendet wird

2. Format:

Hintergrundposition: horizontale Richtung, vertikale Richtung;

3. Wert

3.1 Spezifische Orientierungsnomen
Horizontale Richtung: links in der Mitte rechts
Vertikale Richtung: oben in der Mitte unten

3.2 Spezifische Pixel
Zum Beispiel: Hintergrundposition: 100px 200px;
Denken Sie daran, die Einheit zu schreiben, das heißt, Sie müssen px schreiben
Denken Sie daran, dass bestimmte Pixel negative Zahlen erhalten können

Tastenkombinationen:

bp-Hintergrundposition: 0 0;

Hinweis:

Das gleiche Tag kann gleichzeitig die Hintergrundfarbe und das Hintergrundbild festlegen Wenn die Farbe und das Bild gleichzeitig vorhanden sind, überschreibt das Bild die Farbe

5. Abkürzung für Hintergrundattribute

Hintergrund: Hintergrund Farbhintergrund-Bildkachelmethode, Positionierungsmethode;

Tastenkombination:

bg+ Hintergrund: #fff url() 0 0 keine Wiederholung;

2 🎜>

Im Hintergrundattribut kann jedes Attribut weggelassen werden

3 Was ist die Hintergrundkorrelationsmethode?

Standardmäßig scrollt das Hintergrundbild, während die Bildlaufleiste scrollt. Wenn Sie nicht möchten, dass das Hintergrundbild beim Scrollen der Bildlaufleiste scrollt, können wir die Beziehung zwischen dem Hintergrundbild und dem Bildlauf ändern bar

4. Wie ändere ich die Hintergrundzuordnungsmethode?

Es gibt ein Attribut namens background-attachment

. Dieses Attribut wird speziell zum Ändern der Assoziationsmethode

verwendet Hintergrundanhang: scroll;

Wert:

scroll Standardwert, scrollt beim Scrollen der Bildlaufleiste

behoben: scrollt nicht beim Scrollen der Bildlaufleiste

Verknüpfung Schlüssel:

babackground-attachment:;

5. Der Unterschied zwischen Hintergrundbildern und eingefügten Bildern?

1 Bilder einfügen?

1.1

Das Hintergrundbild ist nur eine Dekoration und wird die Position nicht belegen (Sie können andere Tags und Inhalte darauf schreiben)

Das Einfügen des Bildes wird die Position besetzen (nicht erlaubt) Schreiben Sie andere Tags und Inhalte darauf)

1.2

Das Hintergrundbild verfügt über Positionierungsattribute, sodass Sie die Position des Bildes leicht steuern können
Das eingefügte Bild nicht haben Positionierungsattribute und alle Steuerelemente für das Bild. Der Standort ist nicht sehr praktisch

1.3

Die Semantik des Einfügens von Bildern ist stärker als die Semantik von Hintergrundbildern, also in der Unternehmensentwicklung, wenn Sie Bilder von Suchmaschinen aufgenommen werden sollen, empfiehlt es sich, Bilder einzufügen

6. Was sind CSS-Sprites

CSS-Sprites sind eine Bildsynthesetechnologie

2 .Die Rolle von CSS-Spriteskann die Anzahl der Anfragen reduzieren und den Verarbeitungsdruck des Servers verringern

3 So verwenden Sie CSS-Sprites

CSS-Sprites müssen mit dem Hintergrundbild und der Hintergrundpositionierung übereinstimmen, um sie verwenden zu können

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So laden Sie HTMLString in iOS webView

.box1{
            width: 110px; //设置宽高
            height: 143px;
            background-position: -560px -216px; //设置xy
        }

Tipps zu HTML5, die leicht übersehen werden

Das obige ist der detaillierte Inhalt vonCSS-Hintergrund und Sprites. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!