Jak ustawić krycie tła w CSS

Konfigurowanie tła w aplikacjach internetowych to powszechna operacja, która przyciąga oczy użytkownika. Czasami jednak może to prowadzić do wielkiego rozproszenia. Aby uniknąć takiej sytuacji, twórcy stron internetowych sprawiają, że ich pochodzenie jest przejrzyste, stosując krycie lub korzystając z alternatywnych właściwości krycia CSS.

W tym przewodniku omówimy, jak ustawić krycie tła w CSS.

Jak ustawić krycie tła w CSS?

W CSS krycie tła dotyczy następujących terminów:

• • obraz tła krycia
  • Kolor tła krycia

Teraz wyjaśnimy oba indywidualnie!

Jak ustawić krycie obrazu tła w CSS?

„„nieprzezroczystość„Własność można wykorzystać do sprawienia, aby obrazy są przezroczyste w tle lub w dowolnym miejscu na stronie internetowej. Teksty i kolory tła można również wykonać przezroczyste przy użyciu tej właściwości.

Sprawdź podany szczegółowy przykład, aby dowiedzieć się więcej o ustawieniu krycia obrazu w CSS.

Przykład

Obecnie mamy obraz ustawiony w tle naszego pojemnika:

W naszym pliku HTML dodaliśmy tag za pomocą „my-img„Id w sekcji ciała:

Aby ustawić nieprzezroczystość obrazu tła, musimy stylizować nasz element obrazu. Aby to zrobić, użyj „#”Przed Id nazwano„my-img" Jak "#my-img„Za stylizację. Ponieważ obraz będzie używany w tle wybranego pojemnika, daj trochę miejsca do kontenera za pomocą „wyściółka" z "15%". W następnym kroku ustaw obraz jako tło, wykorzystując „tło" nieruchomość; określić "bez powtórki„Wartość”URL ()„Wartość, aby uniknąć powtarzania obrazu. Wreszcie, ustaw krycie jako wartość „0.2”Lub zgodnie z twoimi preferencjami:

Teraz zapisz kod i otwórz plik HTML w przeglądarce. W naszym przypadku otworzymy go za pomocą „Serwer na żywo”:

Tutaj krycie nasz obraz został pomyślnie zastosowany:

Udajmy się do następnej sekcji!

Jak ustawić krycie koloru tła w CSS?

Zawsze istnieją szanse, że na tle witryny można znaleźć solidne lub gradientowe kolory. W celu krycia kolorów tła wykorzystamy THmi "kolor tła" nieruchomość. Ta właściwość pomaga w konfigurowaniu koloru tła; Można go jednak również wykorzystać do ustawiania krycia kolorów tła lub spraw, aby były przezroczyste.

Spójrz na poniższy przykład użycia określonej właściwości.

Przykład 1: Korzystanie z właściwości koloru tła do ustawienia krycia obrazu

W tym przykładzie kolor tła naszej strony internetowej jest pomarańczowy i musimy ustawić jego krycie:

Aby to zrobić, użyjemy kodu koloru sześciokątnego z „kolor tła" nieruchomość. Za pomocą określonego koloru sześciokątnego zastosujemy krycie do koloru tła:

Notatka: Zmienianie "#00000020„Wartość do„#00000000”Sprawi, że twoje tło będzie całkowicie przezroczyste.

Zapisz kod, naciskając „Ctrl + s”I otwórz go za pomocą serwera na żywo:

Wyjście

Teraz weźmy jeszcze jeden interesujący przykład ustawienia krycia koloru tła w CSS.

Przykład 2: Korzystanie z właściwości koloru tła, aby obraz jest przezroczysty

W tym przykładzie użyjemy „tło”Właściwość i ustaw wartość na„przezroczysty". W rezultacie tło będzie przezroczyste, ale nadal będzie częścią pojemnika:

Tutaj możemy zobaczyć całkowicie przezroczyste tło:

W celu weryfikacji sprawdź dodane elementy w pojemniku:

Dostarczyliśmy najprostsze sposoby ustawienia krycia tła.

Wniosek

Aby ustawić krycie tła, użyj „nieprzezroczystość”,„kolor tła", Lub "tło" nieruchomość. Krycie zapewnia kontrolę nad ustawieniem krycia tła. Właściwość koloru tła może pomóc w zastosowaniu przezroczystości tła za pośrednictwem kodu koloru HEX, podczas gdy właściwość tła jest prosta; Ustawienie go na przezroczyste sprawi, że tło zniknie. W tym artykule wykazaliśmy, jak ustawić krycie tła w CSS.