Wie Hintergrund in CSS3 zum Design

Die meisten Seiten, die Sie schauen, haben eine Art von Hintergrund. Das folgende Verfahren zeigt, wie ein Hintergrund mit CSS3 hinzuzufügen, mit dem Sie Ihre Web-Seite zu einem Besucher noch attraktiver machen können zu suchen.

1. erstellen Sie ExternalCSS.HTML und ExternalCSS.CSS Dateien und kopieren Sie sie in einen neuen Ordner.

2. Erstellen oder ein Hintergrundbild in Joint Photographic Experts Group (JPEG) Format erhalten und nennen Sie es background.jpg.

3. Öffnen Sie ExternalCSS.CSS.

4. Geben Sie den folgenden Code nach den bestehenden Designs und die Änderungen auf der Festplatte speichern.

   body {background-image: url ( "background.jpg") - Hintergrund-size: 100% -background-repeat: no-wiederholbar}

   Der häufigste Ort, um Hintergrundbildern Buch ist in der . Jedoch verhindert, dass Sie nichts von Hintergründen in anderen Objekten und auf verschiedene andere Arten verwenden.

   Der Ausgangspunkt für die meisten Hintergründe ist die Eigenschaft background-image, wo Sie das Bild angeben, können Sie mit der URL () Methode verwendet werden soll. Es ist möglich, mehrere Bilder auf dem Hintergrund hinzuzufügen. Wenn Sie dies tun, verbindet der Browser die Bilder in einer einzigen Darstellung.

   Die Verwendung der Hintergrund-size-Eigenschaft bestimmt, wie groß das Bild am Bildschirm angezeigt wird. Das Beispiel ist ein großes Bild, so dass Sie wollen es den gesamten Anzeigebereich zu übernehmen. 100% Verwendung als der Wert bedeutet, dass das Bild automatisch den gesamten Client-Bereich aufzunehmen ändert die Größe.

   Sie verwenden die background-repeat Eigenschaft, um zu bestimmen, ob das Bild im Hintergrund wiederholt. Es ist üblich, kleine Bilder zu wiederholen, so nehmen sie die gesamte Anzeigefläche nach oben. ein großes Bild Repeating neigt der Hintergrund aussehen verwirrend und schmälern das Gesamtbild des Displays zu machen.

5. Laden Sie die Testseite.

   Sie sehen den Effekt des Stils Änderung.

   

6. Ändern Sie die Größe des Browser-Fensters.

   Sie sehen, dass das Hintergrundbild das gesamte Display zu nehmen Bereich automatisch die Größe.