Darken Tła obraz CSS
Właściwości dla ciemnego obrazu tła w CSS:
Użyjemy następujących trzech właściwości, które CSS zapewnia, aby przyciemnić obraz tła. Te właściwości to:
- Za pomocą właściwości filtra.
- Korzystanie z właściwości obrazu tła i ustawiaj jej wartość w gradiencie liniowym.
- Korzystanie z właściwości w trybie w trybie.
Teraz wykorzystamy wszystkie te właściwości w naszych kodach poniżej, a na podstawie tych przykładów dowiemy się, jak korzystać z tych właściwości i jak ustawić wartość tych właściwości, ponieważ wyjaśnimy również wszystkie kody.
Przykład 1:
Używamy kodu Visual Studio, aby pokazać dostarczone przykłady. Tak więc otworzymy nowy plik i wybierzemy język „HTML”, który spowoduje produkcję pliku HTML. Następnie w nowo wygenerowanym pliku zaczynamy pisać kod. „„.rozszerzenie pliku HTML ”jest automatycznie dołączane do nazwy pliku, gdy zapiszymy wypełniony kod. Teraz otrzymujemy podstawowe tagi, umieszczając „!„Znaki i naciśnięcie„ Enter ”. Kiedy w tym utworzonym pliku pojawią się podstawowe tagi HTML, zaczniemy od dodania nagłówka.
Następnie umieszczamy również akapit poniżej tego nagłówka i wstawiamy obraz po tym akapicie. Jeśli obraz zostanie wstawiony, mamy inny akapit, a także klasę DIV o nazwie „Darkened-Image”. Tutaj kod HTML jest zakończony. Teraz zapisz i przejdźmy do pliku CSS, w którym dodamy właściwość „Filtr” do zaciemnienia obrazu tła.
W przypadku „H1” ustawiamy wartość „Font Family” na „algierskie”, a także stosujemy „kolor” do tego nagłówka jako „zielony”. „Rozmiar czcionki” tekstu akapitu to „20px”, a jego „kolor” jest „czerwony”, „odważny” w „W-Weight”. Następnie wykorzystamy właściwość „Filtr” dla klasy DIV „Darkened-Image”. Ta właściwość pomaga uczynić obraz ciemniejszym. Użyliśmy tutaj tej właściwości, aby obraz wydawał się ciemniejszy w wyjściu. Ustawiamy jego wartość za pomocą wartości „jasności” i wybieramy jasność „60%” dla tego obrazu.
W „obrazie tła” umieszczamy tę samą ścieżkę obrazu, którą podaliśmy w pliku HTML. Zatem stosujemy tę przyciemnioną właściwość do obrazu, który wprowadziliśmy powyżej, i zobaczymy ten oryginalny obraz, a także zaciemniony obraz na ekranie wyjściowym. Ustawiamy również „szerokość” i „wysokość” Div odpowiednio jako „200px” i „620px”. Ta właściwość „Wysokość” ustawi wysokość Div, a właściwość „szerokości” ustawi szerokość div.
Tego obrazu sprawiamy, że jest ciemniejszy obraz za pomocą właściwości CSS „Filtr” i ustawiamy „jasność” jako wartość tej właściwości. Zastosowaliśmy jasność „60%” na ten obraz, aby był ciemniejszy niż oryginalny obraz.
Przykład nr 2:
Mamy tutaj nagłówek, a następnie dodaj obraz. Po tym zdjęciu ponownie umieszczamy nagłówek, a następnie mamy kontener DIV. Wykorzystamy drugą właściwość, aby ten obraz był ciemniejszy.
Stosujemy „kolor” do tego nagłówka jako „bordowy” i ustawiamy wartość „font family” dla „H1” na „algierskie”. „Wysokość” obrazu jest ustawiona na „240px”, a jego „szerokość” to „630px”. Następnie wspominamy o kontenerze Div „Darkened-Image” i umieszczamy właściwość „Image w tle”, w której używamy „gradientu liniowego” i ustawiamy jego wartość w formie „RGBA”. Tutaj używamy dwóch wartości „RGBA” i ustawiamy je na „RGBA (0, 0, 0, 0.5) ”gdzie„ 0.5 ”to wartość alfa. Wkładamy również obraz w „url ()”. Wkładamy ścieżkę obrazu w tym „url ()”. „Wysokość” tego div jest „240px”, a także definiujemy jego „szerokość” na „630px”.
W wyjściu można zobaczyć zarówno oryginalne, jak i zaciemnione wersje obrazu. Oryginalny obraz i zaciemniony obraz można wyraźnie odróżnić od siebie na zrzucie ekranu poniżej. Zmartwiony obraz jest renderowany, ponieważ wykorzystaliśmy właściwość „obrazu tła” i ustawiliśmy jej wartość w typu „liniowo-gradientu”.
Przykład nr 3:
Użyliśmy powyższego kodu HTML i w tym kodzie wstawiamy inny obraz. Użyjemy „trybu mieszania tła” do tworzenia zaciemnionego efektu obrazu na obrazie.
Ustawiliśmy wartość „rodziny czcionki” dla „H1” na „algierskie” i stosujemy „kolor” do tego nagłówka do „Maroon”. „Szerokość” obrazu to „630px”, a jego „wysokość” to „250px”. Używamy nazwy klasy DIV jako „zaciemnionego obrazu” i zamierzamy zastosować do niej niektóre właściwości. Korzystamy z właściwości „tła” i umieszczamy tutaj wartość „RGBA”. Wartość „RGBA”, której używamy, to „(0, 0, 0, 0.7) ”, a następnie mamy właściwość„ URL ”, którą wykorzystujemy do podania ścieżki obrazu. Podajemy ścieżkę obrazu jako „MyNewimage.PNG ”.
Następnie mamy właściwość „powtarzanie tła” i wykorzystujemy słowo kluczowe „bez powtórzenia” jako wartości tej właściwości. Teraz ustawiamy również „rozmiar tła” i umieszczamy „pokrycie”, aby obraz obejmował całe tło. Właściwość „tryb w tle” służy do zastosowania efektu ciemnienia do obrazu. Ustawiliśmy to jako słowo kluczowe „ciemne”. Tak więc, gdy ten obraz będzie na ekranie wyjściowym, pojawi się jako zaciemniony obraz z powodu tej właściwości. „Wysokość” div o nazwie „Darkened-Image” jest dostosowywana do „330px”, a my również ustawiamy jego „szerokość”, która jest „650px”. Teraz spójrz na wyjście tego, jak pojawią się te obrazy.
Zarówno oryginalne, jak i ciemniejsze formy obrazu są widoczne w wyniku. Tutaj w poniższej migawce można łatwo odróżnić oryginalny obraz od zaciemnionego obrazu. Wykorzystaliśmy atrybut „Modę Zmienną” i umieściliśmy słowo kluczowe „ciemniejsze” jako wartość tego atrybutu, aby renderować zaciemniony obraz.
Wniosek
Dokładnie omówiliśmy tę koncepcję i przyjrzeliśmy się wielu przypadkom, jak przyciemnić obraz tła w CSS. Jak wspomniano wcześniej, zastosowaliśmy trzy różne właściwości do przyciemnienia obrazu tła. W naszych kodach wykorzystaliśmy wszystkie trzy właściwości. Omówiliśmy również sposób korzystania z tych właściwości i jak ustawić ich wartość. Omówiliśmy, że mamy właściwość „Filtruj”, właściwość „Image w tle”, a także właściwość „Modę Zmienną w tle” do uczynienia obrazu tła. Dostarliśmy również wyniki wszystkich tych kodów, w których renderowaliśmy zarówno ciemne, jak i oryginalne obraz na ekranie wyjściowym. Dla Twojej korzyści stworzyliśmy kompleksowy samouczek, w którym kod jest zarówno podany, jak i dokładnie wyjaśniony, wraz z wynikami.