| Kolor tła |
Dzięki temu poleceniu można ustalić kolor tła dla danego elementu Składnia: selektor {background-color: kolor;} div {background-color: black;} |
|---|---|
| Tło Obrazkowe | Dzięki temu poleceniu można ustalić tło obrazkowe dla danego elementu. Składnia: selektor {background-image: url(adres);} body {background-image: url(grafika.jpg)} |
| Powtarzanie tła | Dzięki temu poleceniu można ustalić jeden z czterech sposobów powtarzania się obrazka jako tła. Składnia: selektor {background-repeat: powtarzanie;} body {background-repeat: repeat-y;} Parametry: "repeat" - jednocześnie w pionie i poziomie - domyślnie "repeat-x" - w poziomie "repeat-y" - w pionie "no-repeat" - pojedynczy obrazek - bez powtarzania - w górnym-lewym rogu |
| Pozycja tła | Dzięki temu poleceniu można ustalić pozycję obrazka w ramach tła. Niemożliwe to jest przy wartości atrybutu powtarzania: repeat. Składnia: selektor background-position: pozycja; ============================ pozycja: jedna wartość: "center" - obrazek na środku (w centrum) "left" - obrazek po lewej "right" - obrazek po prawej "top" - obrazek na górze jednostki miary - odległość od lewej krawędzi dwie wartości (oddzielone spacją): "left top" - lewy-górny róg "left bottom" - lewy-dolny róg "right top" - prawy-górny róg "right bottom" - prawy-dolny róg dwie jednostki miary - pierwsza z nich "bottom" - obrazek na dole ----------------------------------------------- Jednostki miary: piksele - px punkty edytorskie - pt wysokość litery "x" - ex wysokość aktualnej czcionki - em centymetry lub milimetry - cm, mm części dziesiętne centymetra pisane z kropką np.: 0.5cm procent wielkości nadrzędnej - % cale - in (1in=2.54cm) ============================ |
| Zaczepienie tła | Poleceniem tym można sprawić, że tło będzie nieruchome w czasie przewijania zawartości strony.
Składnia: selektor {background-attachment: zaczepienie;} body {background-attachment: scroll;} zaczepienie: "scroll" - przewijanie tła (domyślnie) "fixed" - tło nieruchome |
| Łączenie atrybutów tła | Dzięki temu poleceniu można w jednym miejscu zebrać atrybuty dotyczące tła. p {color: #800000; background: #00ff00 url(../../grafiki/cwiczenie_13/tlo_css.jpg) no-repeat scroll center;} |
| Gradient liniowy | Gradient to wypełnienie tłem płynnym przejściu kilku kolorów Składnia: selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } body { background: linear-gradient(to top, aqua, blue); } **************************************************** słowa kluczowe: to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg) to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika to right - poziomo z lewej do prawej strony (odpowiednik 90deg) to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie) to left bottom - ukośnie z prawego-górnego do lewego-dolnego narożnika to left - poziomo z prawej do lewej strony (odpowiednik 270deg) to left top - ukośnie z prawego-dolnego do lewego-górnego narożnika kąt - liczony zgodnie z ruchem wskazówek zegara z wartością: 0deg skierowaną pionową w górę, 180deg - pionowo w dół **************************************************** |
| Gradient promienisty | Gradient promienisty to tło o płynnym przejściem kilku kolorów, wywołując efekt trójwymiarowej kuli lub oświetlenia latarki. Składnia: selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) } div {background-image: radial-gradient(circle at 30px 30px, red 10px, blue 30px)}; ############################################## słowa kluczowe: closest-side - gradient będzie się rozchodził do najbliższej krawędzi elementu farthest-side - do najdalszej krawędzi closest-corner - do najbliższego narożnika farthest-corner - do najdalszego narożnika (domyślnie) promień - podany za pomocą jednostek długości lub procentowo poziom pion - poziomy i pionowy promień elipsy, określony za pomocą jednostek długości lub procentowo ############################################## |