Jak zrobić pasiaste tło z CSS

Autor: William Ramirez
Data Utworzenia: 21 Wrzesień 2021
Data Aktualizacji: 12 Móc 2024
Anonim
Tworzenie galerii i umieszczanie jej na stronie, siteor
Wideo: Tworzenie galerii i umieszczanie jej na stronie, siteor

Zawartość

Używając kodu CSS, możesz wygenerować pasiaste tło dla strony internetowej bez użycia grafiki. Ten efekt wykorzystuje poziomy gradientu CSS z wieloma przerwami kolorów, a także właściwość rozmiaru tła, aby powtórzyć gradient wektora na ekranie. Najlepszym sposobem na zrobienie tego jest rozpoczęcie od jednolitego koloru tła i zrobienie jednego z przezroczystych pasków dla koloru, który ma być podświetlony. Użytkownicy, którzy odwiedzają Twoją stronę za pomocą starych przeglądarek internetowych, zobaczą jednolity kolor.


Instrukcje

CSS umożliwia generowanie pasiastego tła dla całej strony internetowej bez użycia grafiki (Jack Hollingsworth / Photodisc / Getty Images)

    Instrukcje

  1. Otwórz plik arkusza stylów CSS w Notatniku lub w programie do edycji kodu. Dodaj tę regułę na końcu pliku:

    html {wysokość: 100%; }

    Ta reguła umożliwia wypełnienie całego tła strony internetowej paskiem gradientu, który utworzy.

  2. Ustaw kolor tła swojej strony w „html {}”, aby podać kolor podstawowy pasków i domyślny dla starych przeglądarek:

    html {wysokość: 100%; kolor tła: czarny; }

  3. Dodaj następujący kod do domyślnego „html {}”, aby utworzyć efekt poziomego paska:

    obraz tła: gradient liniowy (przezroczysty 50%, biały 50%);

    Tworzy dwa podziały kolorów, pierwszy jest przezroczysty, a drugi biały. Każde przerwanie koloru zajmuje 50% przestrzeni gradientu na ekranie. Dostosuj szerokość pasków, zmieniając wartości procentowe.


  4. Dodaj wartość zero do pierwszej przerwy koloru i oddziel ją przecinkiem:

    Obraz tła: gradient liniowy (0, przezroczysty 50%, czarny 50%);

    Pozwoli to ustawić pasy pionowo, zamiast ustawiać je poziomo.

  5. Powiel własność background-image i jej wartości w nowej linii. Zrób to dwa razy, tworząc trzy linie z tym samym kodem. Dodaj przedrostek „-moz” do gradientu liniowego w jednej ze zduplikowanych linii kodu. Dodaj przedrostek „-webkit” do drugiej zduplikowanej linii:

    background-image: gradient liniowy (0, przezroczysty 50%, biały 50%); background-image: -moz-linear-gradient (0, przezroczysty 50%, biały 50%); background-image: -webkit-linear-gradient (0, przezroczysty 50%, biały 50%);

  6. Ogranicz gradient do określonej liczby pikseli, ustawiając rozmiar tła w następnym wierszu kodu CSS:

    rozmiar tła: 20px;

    Zmień liczbę pikseli wielkości tła, aby zmodyfikować rozmiar gradientu. Ze względu na stałe powtarzanie gradientu szerokości strony, każde powtórzenie będzie odpowiadać zestawowi pasków na ekranie.


Uwaga

  • Niektóre starsze przeglądarki nie obsługują gradientów CSS3. Jeśli chcesz wyświetlać paski dla wszystkich typów przeglądarek, użyj komentarzy warunkowych, aby dołączyć arkusz stylów z powtarzającym się wykresem.