W tworzeniu stron internetowych często możesz odczuwać potrzebę dodawania przezroczystego tła. Poszukiwanie przezroczystej właściwości tła w CSS nie da ci żadnych wyników, ponieważ nie ma takiej przezroczystej właściwości. Możesz jednak użyć alternatywnych właściwości lub przezroczysty kod kolorów w tym samym celu.

Na tym blogu dowiemy się o ustawieniu przezroczystego koloru tła w CSS.

Jak ustawić przezroczysty kolor tła w CSS?

Aby ustawić przezroczysty kolor tła, użyjemy następujących metod:

• Własność koloru tła
• nieruchomość

Przejrzyjmy każdą metodę jeden po drugim!

Metoda 1: Używanie koloru tła do ustawienia przezroczystego koloru tła w CSS

W CSS „kolor tła„Właściwość służy do przypisania innego koloru do tła. Ponadto użycie właściwości koloru tła w określony sposób może również ustawić przejrzystość różnych elementów.

Przykład

Oto nasza strona HTML z dwoma tła, jedna jako obraz, a druga jako tło kontenera. Chcemy, aby tło kontenera było przezroczyste, abyśmy mogli zobaczyć dodany obraz ze względu na przejrzystość kontenera:

W naszym pliku HTML dodaliśmy „

„Tag z klasą o nazwie„BG”Wewnątrz elementu DIV i umieścił go w„”Tag:

Przezroczysty

W pliku CSS użyj „." zanim "BG„Zadeklarować to jako klasę. Następnie dodaj właściwość koloru tła wraz z wartością RGBA, przypisz „100px”Wypoścenie i ustaw kolor tekstu jako„biały". Ponieważ kolorystyka RGBA ma swój właściwy format, ustawimy wszystkie jego wartości na zero. Ustaw ostatnią wartość na „.25„Aby uzyskać odcień przezroczystości. Można go jednak zastąpić „0„Aby mieć wyraźny odcień przezroczystości.

W następnym kroku przypisz wyściółkę Div „200px”I ustaw adres URL pożądanego obrazu tła:

Notatka: Nie usuwaliśmy koloru tła, który wcześniej ustawiono jako „wodny". W rezultacie przezroczyste tło pojemnika będzie wyraźnie widoczne przy użyciu kolorystyki RGBA.

Jak widać, pomyślnie ustawiliśmy przezroczysty kolor tła za pomocą właściwości koloru tła.

Teraz sprawdźmy metodę użycia innej właściwości CSS do ustawienia przezroczystego koloru tła.

Metoda 2: Używanie właściwości krycia do ustawienia przezroczystego koloru tła w CSS

W CSS „nieprzezroczystość„Własność jest używana do sprawienia, aby elementy są przezroczyste. Jednak zawsze istnieją poziomy przejrzystości, które można określić, na przykład 1–100 (%). Na przykład element z „0„Krycie będzie całkowicie przezroczyste.

Przykład 1

W tym przykładzie przypisamy „0.2„Wartość krycia dla„.BG" klasa. Wszystkie pozostałe właściwości pozostaną takie same:

Tutaj pomyślnie ustaliliśmy przejrzyste tło:

Jednak ustawienie krycia zastosowało również efekt przezroczystości do dodanego tekstu. Aby rozwiązać taki scenariusz, weźmy kolejny przykład.

Przykład 2

Po przypisaniu wartości krycia jest ona stosowana do każdego elementu w określonym kontenerze, który ma tę samą klasę. Jednak zmiana klasy dodanego tekstu może rozwiązać określony problem.

Aby to zrobić, przypisamy klasę „tekst" Do

tag i klasa „BG„Do tagu:

Przezroczysty

Teraz "Przezroczysty„Tekst należy do innej klasy”.tekst". Więc określamy to „pozycja”I daj mu wartość„absolutny”, Przypisz„margines„Wartość nieruchomości jako„-9%" I "margines lewic„Wartość jako„50px„Aby uzyskać tekst na polu:

.tekst
Pozycja: absolutna;
margines: -9%;
Margin-left: 50px;
kolor biały;

Można zauważyć, że teraz krycie jest stosowane tylko do kontenera, aby był przezroczysty bez zmiany dodanego tekstu:

Przedstawiliśmy najłatwiejsze sposoby ustawienia przezroczystego koloru tła w CSS.

Wniosek

Aby ustawić przezroczysty kolor tła w CSS, możesz użyć „kolor tła„Własność o wartości RGBA i„nieprzezroczystość" nieruchomość. Właściwość w kolorze tła może być używana dwa razy, jedna do ustawiania oryginalnego tła, a druga, aby uczynić pierwszą przezroczystą za pomocą kolorystyki RGBA. Jednak wartość właściwości krycia jest stosowana do wszystkich elementów konkretnej klasy, dla której jest ona zdefiniowana. W tym artykule omówiliśmy dwie wydajne metody ustawienia przezroczystego koloru tła w CSS.