css

Gestreifte Streifen mit CSS3 implementieren

Shou Arisaka
1 Min. Lesezeit
16. Okt. 2025

Ich habe das Seitendesign ein wenig aktualisiert, daher möchte ich das verwendete CSS teilen.

Gestreifte Streifen implementieren

.site-header
background: #009999;
    background-image: -webkit-gradient(linear,0 0,100% 100%, color-stop(.25,#ffffff), color-stop(.25,transparent), color-stop(.5,transparent), color-stop(.5,#ffffff), color-stop(.75,#ffffff), color-stop(.75,transparent),to(transparent));
    -webkit-background-size: 1000px;

Sie können die Farbe ändern, indem Sie den Farbcode fff im obigen Code ändern.

Sie können die Größe der Streifen anpassen, indem Sie den Wert von -webkit-background-size: 1000px; ändern.

Elemente halbtransparent machen

.main-body-in
background-color: rgba(255, 255, 255, 0.7);

Da der Hintergrund zu auffällig ist und es schwer zu lesen macht, habe ich ein halbtransparentes weißes Blatt im Hintergrund platziert. Sie können die Halbtransparenz ändern, indem Sie den Wert von 0,7 anpassen. 1,0 ist undurchsichtig.

Diesen Artikel teilen

Shou Arisaka 16. Okt. 2025

🔗 Links kopieren