Różne metody przyciemnienia obrazu tła w CSS

Bez wątpienia obrazy w tle ulepszają wygląd strony internetowej. Jeśli jednak dodane obrazy są bardzo jasne i mają efekty wielokolorowe, mogą sprawić, że strona będzie wyglądać nieatrakcyjnie, a użytkownik poczuje się nieswojo. W podobnym scenariuszu najlepszą opcją jest przyciemnienie dodanych obrazów.

Czy musisz pobrać obrazy i edytować je w Photoshopie? Absolutnie nie! Różne właściwości CSS mogą ci służyć w określonym celu.

W tym zapisie wyjaśnimy różne metody przyciemnienia obrazów tła za pomocą CSS.

Jak przyciemnić obraz tła w CSS?

Sprawdź poniżej listy właściwości, aby zaciemnić obrazy tła za pomocą CSS.

• Właściwość filtrująca
• właściwość tła
• właściwość w trybie w trybie

Zbadajmy każdą metodę jeden po drugim!

Metoda 1: Użyj właściwości „Filtr”, aby przyciemnić obraz tła w CSS

W CSS „filtr„Właściwość jest wykorzystywana do dodawania efektów graficznych do elementów HTML, szczególnie na obrazach. Ta właściwość może również pomóc w przyciemnianiu obrazu tła, gdy jest to „jasność„Wartość jest dodawana.

Spójrz na podany przykład, aby sprawdzić procedurę przyciemnienia obrazu tła za pomocą właściwości filtra CSS.

Przykład

W tym przykładzie przyciemnimy następujący obraz tła:

W pierwszym kroku użyjemy „tło„Własność o wartości”URL ()„Aby ustawić obraz tła; deklarowanie „bez powtórki„Nie pozwoli, aby obraz powtórzył się kilka razy. Następnie, "wyściółka" z "15%”Będzie wykorzystany do nadania konkretnej przestrzeni naszemu pojemnikowi. Wreszcie, używając „filtr”Własność i ustalenie wartości do„jasność (40%)„Zmniejszy światło wylewające się na obraz i sprawi, że jest ciemne:

Zapisz dodany kod w pliku HTML i po prostu otwórz go w przeglądarce lub użyj „Serwer na żywo„Rozszerzenie w tym samym celu:

Jak widać, obraz tła został zaciemniony za pomocą właściwości filtra CSS:

Metoda 2: Użyj właściwości „tła”, aby przyciemnić obraz tła w CSS

„„tło„Właściwość można wykorzystać do ustawienia obrazu tła, jego koloru, rozmiaru i pozycji na stronie internetowej. Innymi słowy, używając właściwości tła, możesz zastosować prawie wszystkie właściwości obrazu tła.

Przykład

Użyjemy teraz „tło„Własność o wartości”gradient liniowy()”I umieść dwie wartości z kolorystyką RGBA w nich. To stworzy szary odcień przezroczystości na obrazie i sprawi, że będzie ciemnie:

Wyjście

Teraz dowiedz się o właściwości w tle mieszanym w następnej metodzie.

Metoda 3: Użyj właściwości „Modę Zmienną”, aby przyciemnić obraz tła w CSS

„„Modę mieszania tła„Właściwość jest przydatna, gdy kolor i obraz istnieją razem w tym samym miejscu. Ta właściwość jest wykorzystywana do mieszania warstw obrazów z kolorem tła. Ponadto przyciemni obraz tła o określonej wartości.

Przykład

Najpierw ustaw kolor tła „szary”W przypadku pojemnika za pomocą„kolor tła" nieruchomość. W następnym kroku użyj wartości „zwielokrotniać„Wzdłuż nieruchomości”Modę mieszania tła". To połączy obraz i zmieszanie jego warstwy z tłem: