CSS po obrazie
Ten samouczek pokaże, jak dodać nakładkę obrazu przy użyciu pseudoelementu „po” w CSS. Dodamy efekt nakładki obrazu za pomocą pseudoelementu „po”.
Przykład 1:
Aby użyć pseudoelementu „po” w CSS, tworzymy plik HTML. Kod, który piszem w pliku HTML, jest podany w tym przykładzie. Możesz użyć edytora tekstu, którego chcesz i zacząć kodować. Napisz kod przedstawiony na poniższym obrazku. Piszemy ten kod w oprogramowaniu kodu Visual Studio. Wybierając język HTML w tym nowym pliku, po prostu piszemy „!". Naciśnij ENTER, a następnie niezbędne tagi automatycznie pojawią się w tym pliku. Zacznij kodować w jego ciele.
Tworzymy klasę „sekcji” o nazwie „Banner” i wkładamy nagłówek do tego „banera”. Łączymy również ten HTML z plikiem CSS, więc wszystkie stylowania, które robimy w pliku CSS, zostaną zastosowane do tego kodu HTML. Zapisujemy go za pomocą „.rozszerzenie pliku html ”.
Kod CSS:
W tym kodzie CSS używamy pseudoelementu „po”, aby utworzyć nakładkę obrazu. W przypadku pseudoelementu „po” musimy mieć treść, więc umieszczamy tutaj „treść”. Tworzymy element wewnątrz „sztandarza” po treści sztandaru. Teraz tworzymy „wyświetlacz” „blok” i podajemy „pozycję” tego banera jako „absolutne”. „TOP” i „Left” to „0”. Następnie ustawiamy „szerokość” na „100%” tak samo jak „wysokość” o wartości „100%”. Używamy „gradientu liniowego” dla „obrazu tła”, aby obraz był bardziej atrakcyjny. Dajemy temu „120Deg” i umieszczamy dwa kolory na tej właściwości. Następnie ustawiamy jego „krycie” i umieściliśmy „0.7 ”wartość dla tego. Używamy tutaj wartości z-index i umieszczamy do tego „0”.
Następnie ustawiamy pozycję „banera” na „względny”. Używamy również obrazu tła wewnątrz sztandaru. „Wyściółka”, którą ustawiliśmy dla tego, to „20 VH” zarówno dla „TOP”, jak i „Und”, oraz „0” dla „lewego” i „prawego”. Ustawiamy „okładkę” dla „rozmiaru tła” i „Aligację tekstu” na „środku”. Teraz używamy banera i wybieramy wszystkie elementy banera za pomocą selektora „*”. Kiedy używamy tego selektora „*”, otrzymuje wszystkie elementy i stosujemy styl, który włożymy w nią na wszystkich elementach. Ponieważ nasza nakładka obejmuje zarówno tekst, jak i obraz, używamy „indeksu Z”, aby to rozwiązać i ustawiamy treść „z-index” na „10”. I ustaw „względny” dla jego „pozycji”.
Ustawiliśmy kolor treści na „czarny”, aby treść zapisana w banerie pojawiła się na zdjęciu czarna. „Wyrównaj” nagłówek ”do„ środka ”i używamy rodziny„ algierskiej ”do tego nagłówka. Ponadto ustawiamy jego rozmiar na „40px”.
Wyjście:
Po naciśnięciu „Alt+B” można uzyskać wyjście wyjściowe w domyślnej przeglądarce lub klikniesz prawy przycisk myszy na pliku HTML, a następnie wybierz „Otwórz w domyślnej przeglądarce”. Dane wyjście będzie renderować w przeglądarce.
Przykład nr 2:
Tutaj mamy inny przykład, w którym tworzymy nakładkę obrazu przy użyciu tego samego pseudoelementu i zmieniamy nasz kod i pokazujemy, jak to działa.
Kod HTML jest taki sam dla tego przykładu. Ale tutaj zmieniamy nagłówek zapisany wewnątrz sztandaru. Rozdzielajemy ten nagłówek na dwie linie, używając „
”Tag.
Najpierw nieco ustawiliśmy nagłówek, stosując do niego pewne właściwości stylowe. Ustawiamy „tekst tekstowy”, „rozmiar czcionki” i „rodzinę czcionki” nagłówka. Następnie pojawia się pseudo-scelektor, który tworzy nakładkę między obrazem a tekstem. Ilekroć używamy tego selektora „po” w CSS, musimy najpierw zdefiniować „treść”. Następnie ustawiamy jego „wyświetlacz” na „Block”. Wartości „TOP” i „Left”, które tutaj umieściliśmy, są ustawione na „0”. Podczas gdy wartości „szerokości” i „wysokości” są ustawione na „100”. Następnie stosujemy „liniowy gradient” i wybieramy dwa kolory, które są „różowe” i „niebieskie”. Również właściwość „krycia” jest tutaj używana do podania przejrzystego widoku obrazu tła. Ustawiamy jego wartość na „0.6 ”. Używamy „scenariusza tła.jpg ”jako obraz tła dla tego. Umieszczamy tę nazwę obrazu we właściwości „URL” „URL” „URL.
Następnie używamy wyściółki, aby stworzyć przestrzeń i ustawić jego wartości „U góry”, „dolne”, „prawe” i „lewe” za pomocą jednej właściwości „wyściółki”. Tutaj „200 VH” określa „górną” i „dolną” wyściółkę, a „0” określa „lewą” i „prawą” wyściółkę. „Rozmiar tła” jest „pokryciem”, jak użyliśmy w naszym pierwszym przykładzie. Następnie ustawiamy „baner” i „z-index”. W tym celu najpierw używamy pseudoelementu „po”. Wewnątrz ustawiamy „-index” na „1”. Daje indeks „1” z nakładką. Below this, we set the “z-index” for the “content” and apply “10” for the content z-index. Używamy selektora „*” z „banerem” przed podaniem indeksu Z treści banerowej. Ten indeks Z dotyczy wszystkich treści zapisanych w banerie. Używamy również „trybu mieszania mieszanki” do nakładki, którą wcześniej stworzyliśmy. Ta właściwość „Mode mieszanki” pomaga wymieszać wiele elementów.
Kiedy używamy tej właściwości z naszą nakładką, tworzy dla nas niesamowite nowe kombinacje. Możemy uczynić naszą nakładkę zaawansowaną nakładką, używając tej „mieszanki mieszanki” w CSS. Po ukończeniu tego kodu musimy go zapisać za pomocą „.rozszerzenie pliku CSS ”, ponieważ jest to plik CSS.
Wyjście:
Wniosek
Omówiliśmy pseudoelement „po” w CSS, aby zrobić obraz nakładki w tym samouczku. Dowiedzieliśmy się, że nakładka jest tworzona między obrazem tła a tekstem, abyśmy mogli wybrać tekst, co oznacza, że tekst jest oddzielony od obrazu. Użyliśmy „mieszanki mieszanki” na tych nakładkach obrazu, aby były bardziej atrakcyjne. Zbadaliśmy również różne przykłady i wyjaśniliśmy te przykłady w tym samouczku. W tym samouczku przedstawiliśmy wszystkie szczegóły, który jest niezbędny do zrozumienia tego „po” pseudoelementu w CSS. Teraz możesz stworzyć te nakładki na swoje projekty po zrozumieniu tych przykładów, które bardzo ci pomogą w przyszłym kodowaniu.