CSS3-Tutorial (5): Webseitenhintergrund image_css3_CSS_Webseitenproduktion

Webjx-Artikeleinführung zur Webseitenerstellung: Hintergrundbilder/Texturen können auf viele Arten verwendet werden und werden oft verwendet, um der Website die beste endgültige Verschönerung zu verleihen. Da es in CSS3 nun ernst genommen wird, können wir mehrere Hintergrundbilder und Hintergrundbildgrößen anwenden, um perfektere Effekte zu erzielen. Hintergrundbilder/Texturen können auf viele Arten verwendet werden und werden häufig verwendet, um einer Website die beste endgültige Verschönerung zu verleihen. Da es in CSS3 nun ernst genommen wird, können wir mehrere Hintergrundbilder und Hintergrundbildgrößen anwenden, um perfektere Effekte zu erzielen.

Hintergrundbilder/Texturen können auf viele Arten verwendet werden und werden oft verwendet, um einer Website die beste endgültige Verschönerung zu verleihen. Da es in CSS3 nun ernst genommen wird, können wir mehrere Hintergrundbilder und Hintergrundbildgrößen anwenden, um perfektere Effekte zu erzielen.

Vorheriger Artikel: CSS3-Tutorial (4): Webseitenrand und Webseitentextschatten
Die Größe des Hintergrundbilds in CSS3 kann als Hintergrundgröße geschrieben werden:Apx Bpx;
-Apx = x- Achse (Bildbreite)
-Bpx = y-Achse (Bildhöhe)
Nachdem wir dies verstanden haben, beginnen wir, diese Funktion zu erleben:
Die besten Browser, die die CSS3-Hintergrundgröße unterstützen, sind Safari und Opera, daher nur Sie müssen die Präfixe -o und -webkit verwenden. Hintergrundgröße

#backgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.extention) unten rechts no-repeat; -o-background-size: 150px 250px ; -webkit-background-size: 150px 250px; height: inherit; width: 590px; (1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 Windows…)

Um mehrere Hintergrundbilder in CSS3 anzuwenden, verwenden wir eine einfache Trennung, zum Beispiel:

Hintergrund: url(image_1.extension) oben rechts ohne Wiederholung, url( image_2 .extention) unten rechts no-repeat; image_2.extention) unten links no-repeat, url(image_3.extention) unten rechts no-repeat; padding: 15px 25px height: inherit; width: 590px; }

Browser-Unterstützung:

3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 Windows…)

Das Obige ist der Inhalt des CSS3-Tutorials (5): Webseitenhintergrundbild_css3_CSS_ Webseitenproduktion, mehr verwandt Bitte zahlen Sie Beachten Sie für den Inhalt die chinesische PHP-Website (www.php.cn)!