(C) Tło CSS*

Tło CSS

Background

  • background-color: Kolor; – Okresla kolor tła wskazanego obiektu HTML.
  • background-image: Opcje; – Wstawia zdjęcie jako tło wskazanego obiektu HTML.
    • url() – Wstawia zdjęcie jako tło wskazanego obiektu HTML.
    • linear-gradient(Kolor-1, Kolor-2) – Wstawia liniowy gradient jako tło wskazanego obiektu HTML.
    • repeating-linear-gradient(Kolor-1 Procent, Kolor-2 Procent, Kolor-n Procent) – Wstawia liniowy, wielowarstwowy gradient jako tło wskazanego obiektu HTML.
    • radial-gradient(Kolor-1, Kolor-2) – Wstawia kulisty gradient jako tło wskazanego obiektu HTML.
    • repeating-radial-gradient(Kolor-1 Procent, Kolor-2 Procent, Kolor-n Procent) – Wstawia kulisty, wielowarstwowy gradient jako tło wskazanego obiektu HTML.
  • background-clip: Opcja; – Określa pozycje początkową pozycje od której wyliczane jest pozycjonowanie tła.
    • padding-box – Tło nie nachodzi na margines ani obramowanie.
    • border-box – Tło nie nachodzi na margines.
    • content-box – Tło nie nachodzi na margines, obramowanie ani padding.
  • background-repeat: Opcje; – Określa czy obrazek umieszczony jako tło obiektu HTML, ma być powielany.
    • repeat – Powiela obrazek w osi X oraz osi Y.
    • repeat-x – Powiela obrazek w osi X.
    • repeat-y – Powiela obrazek w osi Y.
    • no-repeat – Nie powiela obrazka.
    • round – Powiela obrazek w osi X oraz Y (Dopasowując obrazek tak aby wypełniał cały obiekt).
    • space – Powiela obrazek w osi X oraz Y (Wykorzystując przerwy pomiędzy obrazkami, tak aby wypełniał on cały obiekt).
  • background-attachment: Opcja; – Określa obszar, do którego zostanie zaczepiony obrazek.
    • scroll – Obrazek zostaje zaczepiony do obszaru tła obiektu HTML.
    • fixed – Obrazek zostaje zaczepiony do obszaru tła okna przeglądarki.
    • local – Obrazek zostaje zaczepiony do zawartości danego obiektu.
  • background-position: Pozycja; – Określa pozycję startową obrazka względem obiektu HTML (Np. „left”, „right top”, „30px -120px”, „30% 10%” czy „right 15px top 30px”).
  • background-orgin: Opcja; – Określa pozycje początkową pozycje od której wyliczane jest pozycjonowanie obrazka.
    • padding-box – Obrazek nie nachodzi na margines ani obramowanie.
    • border-box – Obrazek nie nachodzi na margines.
    • content-box – Obrazek nie nachodzi na margines, obramowanie ani padding.
  • background-size: Opcja; – Określa rozmiar obazka wypełniającego obiekt HTML.
    • auto – Wyświetla obrazek w domyślnych wymiarach.
    • cover – Skaluje obrazek w poziomie, aby wypełniał cały obiekt HTML.
    • contain – Skaluje obrazek w pionie, aby wypełniał cały obiekt HTML.
    • Roziar-X Rozmiar-Y – Określa dokłade wymiary obrazka.
  • box-shadow: Rozmiar-X Rozmiar-Y Rozmiar-rozmycia Rozmiar-rozpiętości Kolor; – Określa cienie tła (Instnieje możliwość określenia wielu cieni po przecinku).

Pozostałe tematy związane z CSS

Kaskadowe arkusze stylów

Inspiracje CSS

PDFPRINT

Robert T Kucharski

Cisco Network Engineer in GPW.

Dodaj komentarz