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 }