Tło CSS a kolor tła

, a następnie dodamy nagłówek i akapit.

HTML

< div >

< h1 > LinuxWskazówka < / h1 >

< p > Witamy na naszej stronie internetowej < / p >

< / div >

W CSS dostosujemy wysokość elementu div jako „ 100% ”, aby pojawił się na całej stronie i wielkości czcionki tekstu jako „ xx-duży ”. Następnie ustaw kolor tła jako „ wodny ”.

CSS

div {

wzrost : 100% ;

rozmiar czcionki : xx-duży ;

kolor tła : wodny ;

}

Na poniższym obrazku widać, że zastosowano kolor tła:

Właściwość obrazu tła CSS

„ zdjęcie w tle Właściwość ” służy do ustawiania jednego lub więcej obrazów jako tła elementów HTML. Możesz użyć tej właściwości, aby dodać różne obrazy tła dla różnych elementów.

Składnia

Składnia właściwości background-image to:

obraz tła: url()

Tutaj podaj ścieżkę obrazu, który chcesz ustawić jako tło jako argument „ url() ”.

Przykład

W kontynuacji poprzedniego przykładu dodaj obraz tła w „ div ' klasa. Dodamy adres URL obrazu jako „ url(obraz.jpg) ”:

div {

...

zdjęcie w tle : adres URL ( img.jpg ) ;

}

Poniższe dane wyjściowe wskazują, że obraz tła został pomyślnie dodany:

Zauważ, że obraz się powtarza. Aby rozwiązać ten problem, sprawdź następną właściwość.

Właściwość powtarzania tła CSS

Gdy dodajesz obraz jako tło na stronie internetowej, jest on domyślnie powtarzany. Aby uniknąć tego powtórzenia i ustawić wzór zgodnie z własnym wyborem, „ powtarzanie tła ” nieruchomość jest wykorzystywana.

Składnia

Składnia właściwości background-repeat to:

powtarzanie tła : powtarzać | powtórz-x | powtórz-y | bez powtórzeń

Poniżej podano opis podanych wartości właściwości powtarzania tła:

• powtarzać: Służy do powtarzania obrazu w obu kierunkach, w pionie i poziomie.
• powtórz-x: Służy do ustawienia powtarzania obrazu tylko w poziomie.
• powtórz-y: Określa pionowe powtórzenie obrazu.
• niepowtarzalne: Służy do unikania powtórzeń obrazu.

Przykład

Tutaj ustawimy wartość właściwości background-repeat jako „ bez powtórzeń ”:

div {

...

powtarzanie tła : bez powtórzeń ;

}

Wynik działania powyższego kodu podano poniżej. Widać, że obraz się już nie powtarza:

Właściwość pozycji tła CSS

Aby ustawić pozycję obrazu tła, „ pozycja w tle używana jest właściwość ”. Pozwala dostosować obraz w różnych pozycjach, takich jak lewy górny, lewy środek, lewy dół, prawy górny, prawy środek i wiele innych.

Składnia

Składnia właściwości background-position to:

pozycja w tle : wartość

W miejscu ' wartość ”, możesz określić pozycję obrazu.

Przykład

Tutaj ustawimy pozycję tła jako „ środek ”:

div {

...

pozycja w tle : środek ;

}

Na poniższym wyjściu obraz pojawia się na środku strony:

Właściwość rozmiaru tła CSS

Aby ustawić rozmiar obrazu tła, „ rozmiar tła używana jest właściwość ”.

Składnia

Background-size ma następującą składnię:

rozmiar tła : długość|okładka

Poniżej znajduje się opis wartości właściwości background-size:

• długość: Służy do ustalenia szerokości i wysokości obrazu tła.
• pokrywa: Służy do dostosowania obrazu tła w całym tle.

Przykład

Ustawimy rozmiar tła jako „ 100% ” wzrost i “ 80% ' szerokość:

div {

...

rozmiar tła : 100% 80% ;

}

Możesz zobaczyć, że rozmiar obrazu został zmieniony na podstawie określonych wymiarów:

CSS background-origin Property

„ tło-pochodzenie Właściwość ” służy do dostosowania obszaru pozycjonowania obrazu tła. Obraz jest domyślnie dostosowywany w lewym górnym rogu.

Składnia

Składnia właściwości background-origin to:

tło-pochodzenie : padding-box| ramka-pudełko | zawartość-box

Poniżej opisano wartości właściwości background-origin:

• padding-box: Jest to domyślna wartość właściwości background-origin używana do dostosowania położenia obrazu tła zgodnie z krawędzią dopełnienia.
• ramka-pudełko: Służy do ustawiania obrazu zgodnie z ramką obrazu.
• skrzynka z zawartością: Służy do ustawienia obrazu tła zgodnie z zawartością obrazu.

Notatka: Właściwość background-origin nie działa, jeśli wartość właściwości background-attachment jest ustawiona na „ naprawił ”.

Przykład

Najpierw utwórz ramkę wokół kontenera. Tutaj będziemy kontynuować poprzedni przykład i ustawimy wartość dopełnienia jako „ 10px ”. Następnie dostosuj szerokość obramowania jako „ 15px ”, styl jako „ grzbiet ” i pokoloruj jako „ rgb(1, 68, 68) ”. Na koniec przypiszemy wartość właściwości background-origin jako „ zawartość-box ”:

div {

...

wyściółka : 10px ;

granica : 15px grzbiet RGB ( 1 , 68 , 68 ) ;

tło-pochodzenie : zawartość-box ;

}

Wynik działania powyższego kodu podano poniżej. Widać, że pozycja obrazu jest ustawiona zgodnie z zawartością div:

CSS background-clip Property

„ klip w tle Właściwość ” działa na kolorze tła elementu. Pozwala kontrolować, jak daleko kolor tła rozciąga się poza element, na przykład dopełnienie elementu, jego obramowanie i jego zawartość.

Składnia

Składnia właściwości background-clip to:

tło-pochodzenie : ramka-pudełko | padding-box | zawartość-box

Poniżej opisano wartości właściwości background-origin:

• ramka-pudełko: Jest to domyślna wartość właściwości background-origin używana do ustawiania koloru tła za obramowaniem.
• padding-box: Służy do dostosowania koloru w polu wyściółki elementu.
• skrzynka z zawartością: Służy do ustawiania koloru tła zgodnie z zawartością elementu.

Przykład

Będziemy kontynuować poprzedni przykład i zmienimy wartość stylu obramowania na „ kropkowany ”, aby zrozumieć właściwość background-clip. Następnie ustawimy wartość właściwości tła-clip jako „ padding-box ”:

div {

...

klip w tle : padding-box ;

}

Dane wyjściowe oznaczają, że po zakończeniu krawędzi obramowania pojawia się biały kolor tła:

Właściwość załączników w tle CSS

„ załącznik w tle Właściwość ” służy do dostosowania zachowania lub obrazu podczas przewijania strony. Jego zachowanie można ustawić jako przewijanie z innymi elementami lub naprawić.

Składnia

Składnia właściwości background-attachment to:

załącznik w tle : wartość

Możesz ustawić wartość dołączania w tle jako „ naprawił ”, aby naprawić obraz tła lub „ zwój ”, aby obraz przewijał się wraz ze stroną.

Notatka: Domyślnie wartość właściwości background-attachment jest ustawiona jako „ zwój ”.

Widać, że dodany obraz tła nie jest statyczny, gdy przewijamy. Teraz naprawmy ten problem.

Aby to zrobić, ustawiamy wartość właściwości background-attachment jako „ naprawił ”:

div {

...

załącznik w tle : naprawił ;

}

Oto wynik pokazujący, że obraz został naprawiony:

Teraz przejdź do porównania właściwości tła i koloru tła.

Tło CSS a kolor tła

Podana tabela będzie rozróżniać właściwości tła i koloru tła na podstawie ich cech:

Cechy	Tło CSS	CSS-kolor tła
Rodzaj	To super nieruchomość.	Jest to podwłasność właściwości tła.
Funkcjonalność	Ustawia wszystkie właściwości tła.	Ustawia tylko kolor tła.
Zasięg	Obsługuje wszystkie właściwości tła	Obsługuje tylko właściwość background-color
Poziom	Gdy potrzebujesz dodać wiele wartości tła, jest łatwy w użyciu. Możesz ustawić wartości wszystkich właściwości tła jednocześnie.	Można go wykorzystać, gdy wystarczy dodać tylko jeden kolor tła.
Składnia	tło: wartości (Wartości to bg-color, bg-image i inne właściwości)	kolor tła: kolor

Wyjaśniono, jak właściwości koloru tła różnią się od właściwości tła.

Wniosek

CSS” tło Właściwość ” to skrócona właściwość używana do jednoczesnego ustawiania wielu wartości tła, takich jak kolor, obraz, pozycja, rozmiar, pochodzenie i inne. Z drugiej strony, ' kolor tła ” służy tylko do dodawania koloru do tła. W tym przewodniku omówiliśmy różnicę między właściwością CSS background a właściwością CSS background-color.