Inhalt
Mit CSS-Code können Sie einen gestreiften Hintergrund für eine Webseite generieren, ohne Grafiken zu verwenden. Dieser Effekt verwendet CSS-Verlaufsstufen mit mehreren Farbumbrüchen sowie die Eigenschaft Hintergrundgröße, damit sich der Verlaufsvektor auf dem Bildschirm wiederholt. Am besten beginnen Sie mit einer durchgehenden Hintergrundfarbe und erstellen einen Ihrer transparenten Streifen, damit die Farbe hervorgehoben wird. Benutzer, die Ihre Seite mit alten Internetbrowsern besuchen, sehen einfarbige Farben.
Anweisungen
-
Öffnen Sie die CSS-Stylesheet-Datei im Editor oder in einem Code-Bearbeitungsprogramm. Fügen Sie diese Regel am Ende der Datei hinzu:
html {Höhe: 100%; }
Diese Regel ermöglicht es, den gesamten Hintergrund einer Webseite mit dem von ihr erstellten Verlaufsstreifen zu füllen.
-
Legen Sie eine Hintergrundfarbe für Ihre Seite in "html {}" fest, um die Grundfarbe für Ihre Streifen und einen Standard für alte Browser anzugeben:
html {Höhe: 100%; Hintergrundfarbe: schwarz; }
-
Fügen Sie dem Standard "html {}" den folgenden Code hinzu, um einen horizontalen Streifeneffekt zu erstellen:
Hintergrundbild: linearer Gradient (transparent 50%, Weiß 50%);
Es werden zwei Farbbrüche erzeugt, wobei der erste transparent und der zweite weiß ist. Jede Farbunterbrechung nimmt 50% des Farbverlaufs auf dem Bildschirm ein. Passen Sie die Breite der Streifen an, indem Sie die Prozentwerte ändern.
-
Fügen Sie dem ersten Farbumbruch einen Wert von Null hinzu und trennen Sie ihn mit einem Komma:
Hintergrundbild: linearer Gradient (0, transparent 50%, Schwarz 50%);
Dadurch werden Ihre Streifen vertikal und nicht horizontal positioniert.
-
Duplizieren Sie die Hintergrundbild-Eigenschaft und ihre Werte in einer neuen Zeile. Führen Sie dies zweimal aus und erstellen Sie drei Zeilen mit demselben Code. Fügen Sie dem linearen Farbverlauf in einer der doppelten Codezeilen das Präfix "-moz" hinzu. Fügen Sie der anderen doppelten Zeile das Präfix "-webkit" hinzu:
Hintergrundbild: linearer Gradient (0, transparent 50%, Weiß 50%); Hintergrundbild: -moz-linearer Gradient (0, transparent 50%, Weiß 50%); Hintergrundbild: -webkit-linearer Gradient (0, transparent 50%, Weiß 50%);
-
Schränken Sie den Farbverlauf auf eine bestimmte Anzahl von Pixeln ein, indem Sie die Hintergrundgröße in der nächsten Zeile Ihres CSS-Codes festlegen:
Hintergrundgröße: 20px;
Ändern Sie die Anzahl der Pixel in Hintergrundgröße, um die Gradientengröße zu ändern. Aufgrund der konstanten Wiederholung des Seitenbreitenverlaufs entspricht jede Wiederholung einem Satz von Streifen auf dem Bildschirm.
Anweisungen
Hinweis
- Einige ältere Browser unterstützen keine CSS3-Verläufe. Wenn Sie Streifen für alle Browsertypen anzeigen möchten, verwenden Sie bedingte Kommentare, um ein Stylesheet mit einem sich wiederholenden Diagramm einzuschließen.