CSS „tło„Właściwość jest wykorzystywana do kontrolowania tła podanego elementu. Jednocześnie istnieją różne właściwości, które składają się na tło, w tym „kolor tła”,„zdjęcie w tle”,„Rozmiar tła", i wiele więcej. Tło obejmuje całkowity rozmiar elementu, w tym granica i wyściółka, ale wyklucza margines. Sprawia, że ​​tekst jest tak widoczny i łatwy do odczytania. Ponadto „kolor tła” określa kolor z tyłu zdefiniowanego elementu lub danych.

Ten post wyjaśni następujące:

• Jaka jest właściwość CSS „tła”?
• Jaka jest różnica między „tłem: none” vs „tło: przezroczyste”?

Jaka jest właściwość CSS „tła”?

„„tło„Właściwość jest właściwością skrótów w CSS wykorzystywany do ustawiania tła dowolnego elementu w postaci obrazu, akapitu lub dowolnego rodzaju elementu w dokumencie HTML. Istnieją właściwości tła, które składają się z ośmiu innych właściwości:

• "zdjęcie w tle”Jest wykorzystywany do ustawiania jednego lub więcej obrazów na tylnym podrębie elementu. Zdjęcie tła pojawia się domyślnie w lewym górnym rogu strony HTML.
• „„powtarzanie tła”Atrybut określa, czy obraz tła zostanie powtórzony. Zdjęcie tła jest powtarzalne zarówno poziomo, jak i pionowo domyślnie.
• "Przywiązanie do tła”Określa, czy przewijanie obrazu tła musi być przechowywane na stronie HTML lub dodatkowych stronach kontenerowych.
• "pozycja w tle”Jest wykorzystywany do ustawiania pozycji elementu.
• "Rozmiar tła”Służy do przydzielania rozmiaru obrazu tła.
• „„klapa”Atrybut określa, ile tła elementu należy objąć obrazem lub kolorem.
• "kolor tła”Jest wykorzystywany do przydzielenia koloru z tyłu elementu.
• "Origina w tle”Opisuje lokalizację pochodzenia obszaru pozycjonowania tła na obrazie tła.

Jaka jest różnica między „tłem: none” vs „tło: przezroczyste”?

Nie ma między nimi różnicy. Jeśli nie określisz wartości dla żadnych pół tuzina właściwości, dla których tło jest skrótem, jest ono ustawione na wartość domyślną, w tym „nic" I "przezroczysty".

Przykład 1: Korzystanie z „Tło: Brak” w CSS

Ustawić „Tło: Brak„Własność w CSS, najpierw dodaj dane w dokumencie HTML, a następnie uzyskaj dostęp do elementu w CSS i zastosuj go.

Aby uzyskać praktyczną implikację, wypróbuj dane instrukcje.

Krok 1: Dodaj dane podczas nagłówka

Aby dodać nagłówek na stronie HTML, użyj znacznika nagłówka z „

" Do "

". W tym scenariuszu mamy „H1”W pierwszym nagłówku„ ”H2”Dla drugiego nagłówka i„H3”Na trzeci nagłówek. Usadzaj również dane w tekście do nagłówka:

Witryna samouczka Linuxhint

Tło jako brak

Tło jest zielone

Wyjście

Krok 2: Ustaw właściwość „Tło: Brak”

Następnie dostęp do nagłówka za pomocą „H2„Zagładuj i zastosuj poniżej listy nieruchomości:

H2
Kolor: pomidor;
kolor tła: Brak;

Tutaj:

• "kolor„Właściwość jest wykorzystywana do ustawiania koloru tekstu.
• "kolor tła”Określa kolor z tyłu elementu. Aby to zrobić, tutaj wartość tej właściwości jest ustalana jako „nic„Bez koloru na tylnym miejscu.

Można zauważyć, że właściwość kolorów ustawia kolor tekstu. Jednak z tyłu elementu nie ma koloru:

Krok 3: Ustaw tło jako konkretny kolor

Następnie dostęp do drugiego nagłówka za pomocą nazwy nagłówka „H3”I zastosuj te same właściwości z różnymi wartościami:

H3
kolor biały;
kolor tła: zielony;

Aby to zrobić, zastosujemy „kolor„Własność o wartości jako„biały”I„ „kolor tła”Nieruchomość ustawiona jako„zielony”:

Przykład 2: Korzystanie z „Tło: przezroczyste” w CSS

Aby ustawić tło: przezroczysty w CSS, użyj powyższego kodu HTML, a następnie zastosuj „kolor tła" Jak "przezroczysty".

Krok 1: Ustaw „kolor tła: przezroczysty”

Uzyskać dostęp do "H2„Kierowanie się i zastosowanie podanych właściwości fragmentów:

H2
Kolor: RGB (10, 250, 70);
kolor tła: przezroczysty

Aby to zrobić, w powyższym fragmencie:

• Wartość „kolor„Własność jest ustalona jako„RGB (10, 250, 70)".
• "kolor tła”Jest ustawiony jako„przezroczysty".

Krok 2: Ustaw konkretny kolor na tylnym miejscu

Uzyskaj dostęp do nagłówka i zastosuj te same właściwości o różnych wartościach:

H3
kolor biały;
kolor tła: RGB (236, 169, 91);

Notatka: Nie ma różnicy między „tłem: brak” a „tłem: przezroczyste” w CSS.

Wniosek

Nie ma różnicy między „Tło: Brak" I "Tło: przezroczyste". „„kolor tła: Brak”. Z drugiej strony, jeśli określiłeś kolor na tylnym elemencie, „kolor tła: przezroczysty”, Określ, że kolor tła powinien być przezroczysty w zdefiniowanym elemencie. Ten post wykazał różnicę między właściwością tła o braku wartości a przezroczystym.