css formatowanie wyglądu tła

Transkrypt

css formatowanie wyglądu tła
CSS FORMATOWANIE WYGLĄDU TŁA
nazwa_selektora {
background-color:
red;
kolor #66AAFF;
kolor #69C;
kolor rgb(255,33,170);
kolor rgb(25%,75%,75%);
kolor tła z nazwy, palet
}
nazwa_selektora {
background-image:
url(obraz.png); - tło obrazkowe, ścieżka do obrazku;
}
nazwa_selektora {
background-image:
url(obraz1.png),
url(obraz2.png),
url(obraz3.png);
użycie wielokrotne obrazu jako tła
nazwa_selektora {
background-repeat:
repeat - powtarzanie tła w obu kierunkach
repeat-x - powtarzanie tła w kierunku poziomym
repeat-y - powtarzanie tła w kierunku pionowym
no-repeat - brak powtarzania tła
space – obrazy w całości nie przycinane
}
nazwa_selektora {
background-position:
center - obrazek na środku (w centrum)
left - obrazek po lewej
right - po prawej
top - na górze
bottom - na dole
1cm -długości - odległość od lewej krawędzi
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
150px 150px - odległość od lewej i odległość od góry
}
nazwa_selektora {
background-position:
150px 150px, - pozycja obrazu 1 następna pozycja
obrazy jest określana po przecinku
250px 250px, - pozycja obrazu 2 następna pozycja
}
CSS FORMATOWANIE WYGLĄDU TŁA
nazwa_selektora {
background-attachment:
scroll - przewijanie tła
fixed - nieruchome tło
local - tło nieruchome względem obiektu
}
nazwa_selektora {
background-origin:
border-box - tło liczone względem krawędzi obramow
padding-box - tło liczona względem krawędzi marginesu
wewnętrznego
content-box - tło liczone względem krawędzi właściwej
}
nazwa_selektora {
background-size:
contain - obraz zachowuje proporcje, i mieści się w tle
cover - obraz zachowując proporcje, nie mieści się w tle
auto - zachowanie domyślne
150px 150 px podajemy rozmiar obrazka
40% 50% - podajemy procentowe powiększenie obrazka
}
nazwa_selektora {
background: linear-gradient(
to top - przejście kolorów 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
to right bottom - ukośnie z lewego-górnego
do prawego-dolnego
narożnika
to bottom - pionowo z górny do dołu
to left bottom - ukośnie z prawego-górnego
do lewego-dolnego narożnika
to left - poziomo z prawej do lewej strony
to left top - ukośnie z prawego-dolnego do
lewego-górnego narożnika
90deg) -kąt liczony zgodnie z ruchem
wskazówek
}
CSS FORMATOWANIE WYGLĄDU TŁA
nazwa_selektora {
background: radial-gradient(
circle - okrąg pojedynczy promień
określony w jednostkach długości
ellipse - elipsa
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
45% ) - podany procentowo
nazwa_selektora {
background:
none
}

Podobne dokumenty