Jak ustawić przezroczystość obrazu tła w CSS?

Jak ustawić przezroczystość obrazu tła w CSS?

Ustawienie przezroczystości obrazu tła w CSS wymaga użycia właściwość obrazu tła wraz z właściwością opacity. Dostosowując krycie, kontrolujesz przezroczystość obrazu tła, umożliwiając częściowe prześwitywanie elementów znajdujących się za nim, tworząc wizualnie efekt warstwowy.

Stosujemy następujące podejścia do ustawiania przezroczystości obrazu tła w CSS:

Spis treści

1. Korzystanie z właściwości krycia

The Właściwość krycia w CSS ustawia poziom przezroczystości elementu i jego zawartości. Akceptowanie wartości od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty) wpływa na cały element, w tym na jego elementy potomne, dzięki czemu jest to prosty i skuteczny sposób kontrolowania przezroczystości w projektowaniu stron internetowych.

Składnia:

div {  opacity: 0.5; } 

Przykład: Właściwość opacity w stylu CSS klasy .element jest ustawiona na 0,3, dzięki czemu obraz tła jest półprzezroczysty. Dostosowuje to widoczność tła przy jednoczesnym zachowaniu czytelności tekstu.

HTML




> <> html> lang> => 'en'> >> > <> head> >> > <> meta> charset> => 'UTF-8'> >> > <> meta> name> => 'viewport'> content> => 'width=device-width, initial-scale=1.0'> >> > <> title> >Nieprzezroczystość tytułu obrazu tła>