CSS zapewnia różne właściwości w stylu elementów HTML. Właściwości te są używane do różnych celów, takich jak dodanie obrazu i koloru tła oraz ustawienie szerokości i wysokości elementów HTML. Właściwości te obejmują margines, kolor, szerokość, wysokość, tło, kolor tła i wiele innych. Mówiąc dokładniej, właściwość tła i koloru tła służy do ustawienia tła elementów HTML.

W tym podręczniku szczegółowo poznamy różnicę między właściwościami koloru tła.

Zaczynajmy!

Właściwość tła CSS

Aby dostosować tło dowolnego elementu HTML, CSS ”tło”Nieruchomość jest wykorzystywana. Jest to skrót od ośmiu kolejnych nieruchomości, co oznacza, że ​​możesz użyć ich wszystkich w jednej linii. Te inne właściwości to:

• kolor tła
• zdjęcie w tle
• pozycja w tle
• Rozmiar tła
• powtarzanie tła
• Origina w tle
• klapa
• Przywiązanie do tła

Składnia

Oto składnia właściwości tła:

Tło: Kolor obrazu obrazu/rozmiar powtarzający się przywiązanie do klipu

Przejdźmy do wyjaśnienia wszystkich wyżej wymienionych nieruchomości jeden po drugim.

Własność koloru tła CSS

Używając "kolor tła„Właściwość, możesz ustawić kolor tła. Kolor pojawi się za elementami HTML.

Składnia

Składnia właściwości koloru tła to:

kolor tła: kolor

W miejscu "kolor”, Możesz ustawić kolor tła, który chcesz pojawić za elementami.

Przykład

Najpierw w pliku HTML utworzymy kontener za pomocą znacznika, a następnie dodamy nagłówek i akapit.

Html

Linuxhint

Witamy na naszej stronie internetowej

W CSS dostosujemy wysokość Div jako „100%„Aby pojawić się na całej stronie i czcionki tekstu jako„XX-LARGE". Następnie ustaw kolor tła jako „wodny".

CSS

div
Wysokość: 100%;
Rozmiar czcionki: XX-LARGE;
kolor tła: Aqua;

Na zdjęciu poniżej widać, że zastosowano kolor tła:

Właściwość CSS-Image-Image

„„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 obrazu tła to:

Image tła: URL ()

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

Przykład

Kontynuując poprzedni przykład, dodaj obraz tła w „div" klasa. Dodamy adres URL obrazu jako „URL (IMG.JPG)”:

div
…
Image tła: URL (IMG.jpg);

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

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

Właściwość CSS powtarzająca się do tła

Po dodaniu obrazu jako tła na stronie internetowej, domyślnie się powtarza. Aby uniknąć tego powtórzenia i ustawić wzór zgodnie z wyborem, „powtarzanie tła”Nieruchomość jest wykorzystywana.

Składnia

Składnia właściwości powtarzania tła to:

powtórka tła: powtórz | powtórz-x | Powtórz Y | Brak powtórki

Opis określonych wartości właściwości powtarzania tła podano poniżej:

• powtarzać: Jest wykorzystywany do powtarzania obrazu w obu kierunkach, pionowych i poziomych.
• powtórz-X: Służy do ustawienia powtórzenia obrazu tylko poziomo.
• Powtórz Y: Określa pionowe powtórzenie obrazu.
• bez powtórki: Służy do uniknięcia powtarzania obrazu.

Przykład

Tutaj ustawimy wartość właściwości powtarzania tła jako „bez powtórki”:

div
…
Powtórzenie tła: bez powtórzenia;

Wynik powyżej wyprzedanego kodu podano poniżej. Widać, że obraz nie jest już powtarzany:

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

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

Składnia

Składnia właściwości pozycji tła to:

Upozycja tła: wartość

W miejscu "wartość”, Możesz określić pozycję obrazu.

Przykład

Tutaj ustawimy pozycję tła jako „Centrum”:

div
…
Upozycja tła: Center;

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

Właściwość wielkości tła CSS

Aby ustawić rozmiar obrazu tła, „Rozmiar tła„Własność jest używana.

Składnia

Rozmiar tła ma następującą składnię:

Rozmiar tła: długość | Okładka

Poniżej znajduje się opis wartości właściwości wielkości tła:

• długość: Służy do naprawy szerokości i wysokości obrazu tła.
• okładka: Jest wykorzystywany do dostosowania obrazu tła na całym tle.

Przykład

Ustawimy rozmiar tła jako „100%”Wysokość i„80%" szerokość:

div
…
Rozmiar tła: 100% 80%;

Widać, że obraz został zmieniony na podstawie określonych wymiarów:

Właściwość CSS tła

„„Origina w tle„Właściwość jest wykorzystywana do dostosowania obszaru pozycjonowania obrazu tła. Obraz jest regulowany w lewym górnym rogu jako domyślnie.

Składnia

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

Origina w tle: padding-box | Border-box | Content-box

Wartości właściwości tła-originy opisano poniżej:

• padding-box: Jest to domyślna wartość właściwości tła-origin wykorzystywana do dostosowania położenia obrazu tła zgodnie z krawędzią wyściółki.
• Border-box: Służy do ustawienia obrazu zgodnie z skrzynią graniczną obrazu.
• Content-box: Jest wykorzystywany do ustawienia obrazu tła zgodnie z zawartością obrazu.

Notatka: Właściwość tła pochodzenia nie działa, jeśli wartość właściwości przywiązania tła jest ustawiona jako „naprawił".

Przykład

Najpierw stwórz granicę wokół pojemnika. Tutaj będziemy kontynuować poprzedni przykład i ustawimy wartość wyściółki jako „10px". Następnie dostosuj szerokość obramowania jako „15px”, Styl jako„grzbiet”, I kolor jako„RGB (1, 68, 68)". Ostatecznie przypisamy wartość właściwości z pochodzenia tła jako „Content-box”:

div
…
Wyściółka: 10px;
granica: 15px grzbiet RGB (1, 68, 68);
Origin w tle: content-box;

Wynik powyższego kodu podano poniżej. Możesz zobaczyć, że pozycja obrazu jest ustawiona zgodnie z treścią Div:

Własność CSS z klasą

„„klapa„Właściwość działa na kolorze tła elementu. Pozwala kontrolować, jak daleko kolor tła rozciąga się poza element, taki jak wyściółka elementu, jego granica i jego zawartość.

Składnia

Składnia właściwości w tle jest:

Origina w tle: Border-box | Padding-box | Content-box

Wartości właściwości tła-originy opisano poniżej:

• Border-box: Jest to domyślna wartość właściwości tła-origin używana do ustawiania koloru tła za granicą.
• padding-box: Jest wykorzystywany do dostosowania koloru w polu wyściółki elementu.
• Content-box: 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 granicznego na „kropkowany„Aby zrozumieć właściwość w kształcie w tle. Następnie ustawimy wartość właściwości w tle, jako „Padding-Box”:

div
…
CLIP: PALDING-box;

Wyjście oznacza, że ​​kolor białego tła pojawia się po zakończeniu krawędzi granicy:

Własność CSS w tle

„„Przywiązanie do tła„Właściwość służy do dostosowania zachowania lub obrazu podczas przewijania strony. Jego zachowanie można przewidzieć z innymi elementami lub naprawić.

Składnia

Składnia właściwości przywiązania tła to:

Przywiązanie tła: wartość

Możesz ustawić wartość przywiązania tła jako „naprawił„Aby naprawić obraz tła lub„zwój”Aby umożliwić obrazowi przewijanie ze stroną.

Notatka: Domyślnie wartość właściwości przywiązania tła jest ustawiona jako „zwój".

Można zauważyć, że dodany obraz tła nie jest statyczny, gdy przewijamy. Teraz rozwiązajmy ten problem.

Aby to zrobić, ustawiamy wartość właściwości przywiązania tła jako „naprawił”:

div
…
Przywiązanie do tła: Naprawiono;

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

Teraz skieruj się w kierunku porównania między właściwościami tła i koloru tła.

Tło CSS vs kolor tła

Podana tabela rozróżni właściwości tła i koloru tła na podstawie ich funkcji:

Cechy	Tło CSS	Kolor tła CSS
Typ	To jest super właściwość.	Jest to subproperty właściwości w tle.
Funkcjonalność	Ustawia wszystkie właściwości tła.	Ustawia tylko kolor tła.
Zakres	Obsługuje wszystkie właściwości tła	Obsługuje tylko właściwość koloru w tle
Poziom	Kiedy musisz dodać wiele wartości tła, jest łatwy w użyciu. Możesz jednocześnie ustawić wartości wszystkich właściwości tła.	Można go wykorzystać, gdy trzeba tylko dodać jeden kolor tła.
Składnia	Tło: Wartości (Wartości to kolor BG, obraz BG 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 właściwość skrótów używana do ustawiania wielu wartości tła jednocześnie, takich jak kolor, obraz, pozycja, rozmiar, pochodzenie i więcej. Z drugiej strony, "kolor tła”Służy tylko do dodania koloru do tła. W tym przewodniku omówiliśmy różnicę między właściwością w tle CSS a właściwością koloru tła CSS.