Wie man einen gestreiften Hintergrund mit CSS

Mit Cascading Style Sheet Code, können Sie einen gestreiften Hintergrund für eine ganze Web-Seite generieren, ohne Verwendung von Grafiken. Dieser Effekt verwendet CSS Niveau Farbverläufe mit mehreren Haltestellen in Farbe und Eigenschaft "Hintergrund-Size" für den Farbverlauf wiederholt sich über den Bildschirm. Der beste Weg, dies zu tun ist zu beginnen mit einem einfarbigen Hintergrund-Farbe und einer der Ihren Streifen transparent machen, damit die Farbe durchscheint. Wenn Besucher Ihre Web Seite in älteren Browsern anzeigen sehen, sehen sie die Volltonfarbe.

Anweisungen

1 Öffnen Sie Ihre CSS Stylesheet-Datei in Editor oder ein Programm für die Codebearbeitung. Fügen Sie diese Regel an das Ende der Datei hinzu:

HTML {}

Höhe: 100 %;

}

Diese Regel ermöglicht es, den gesamten Hintergrund einer Webseite mit dem Streifen-Gradienten zu füllen, die Sie erstellen werden.

2 Legen Sie eine Hintergrundfarbe für Ihre Web-Seite in "html {}" auf eine Basisfarbe für Ihre Streifen und ein Fallback für ältere Browser bereitstellen:

HTML {}

Höhe: 100 %;

Hintergrundfarbe: schwarz;

}

3 Fügen Sie diesen Code auf Ihre "html {}" Regel einen horizontalen Streifen-Effekt zu erzielen:

Hintergrund-Bild: linear-gradient(transparent 50%, white 50%);

Dieser Code erstellt zwei Haltestellen in Farbe in Ihrem Verlauf den ersten transparent und das zweite weiße. Jede Farbunterbrechungsregler nimmt 50 Prozent von den Farbverlauf Platz auf dem Bildschirm. Passen Sie die Breite der Streifen im Verhältnis zueinander, indem Sie ändern die Prozentwerte.

4 Fügen Sie einen NULL-Wert vor den ersten Farbunterbrechungsregler und von den Haltestellen mit einem Komma zu trennen:

Hintergrundbild: linear-gradient(0, transparent 50%, black 50%);

Diese Änderung vornehmen Ihre Streifen vertikal statt Horizontal.

5 Duplizieren Sie die Eigenschaft "Background-Image" und seine Werte in einer neuen Zeile. Tun Sie dies zweimal, so dass Sie mit drei Zeilen desselben Codes am Ende. Hinzufügen der "-Moz" Präfix für den linearen Farbverlauf in einem duplizierten Codezeilen. Hinzufügen der "-Webkit" Präfix zum anderen dupliziert Linie:

Hintergrund-Bild: linear-gradient(0, transparent 50%, white 50%);

Hintergrund-Bild: - Moz-linear-gradient(0, transparent 50%, white 50%);

Hintergrund-Bild: - Webkit-linear-gradient(0, transparent 50%, white 50%);

6 Beschränken Sie Ihre Farbverlauf auf eine bestimmte Anzahl von Pixeln nach Festlegen der "Hintergrund-Größe" in der nächsten Zeile der CSS Code:

Hintergrund-Größe: 20px;

Ändern Sie die Anzahl der Pixel im "Hintergrund-Größe" zum Ändern der Größe des Farbverlaufs. Da die Steigung für die Breite der Seite wiederholt wird, wird jeder Wiederholung des Farbverlaufs eine Reihe von Streifen auf dem Bildschirm.

Tipps & Warnungen

• Einige ältere Browser unterstützen keine CSS3 Farbverläufe. Wenn Sie einen gestreiften Hintergrund für jeden Browser anzeigen möchten, verwenden Sie bedingte Kommentare, um ein Stylesheet mit einer wiederholten Grafik enthalten.