CSS obraz tła krycia bez wpływu na tekst
Przykład 1
Aby zmienić nieprzezroczystość obrazu tła bez wpływu na tekst, musimy napisać kod HTML i zmienić krycie w kodzie CSS. Używamy kodu Visual Studio do robienia tych przykładów. Tak więc otwieramy nowy plik w tym oprogramowaniu i wybieramy język „HTML” i tworzony jest plik HTML. Następnie zaczynamy kodować w tym pliku. Po ukończeniu naszego kodu zapisujemy go i „.rozszerzenie pliku HTML ”automatycznie generuje tę nazwę pliku.
Tworzymy klasę „Div” „Demo-Wrap” za pomocą znacznika obrazu. Klasa obrazu, której używamy, to „IMG-BG”. Teraz musimy ustawić obraz na tle, więc używamy „tła-img src” i umieszczamy nazwę obrazu, który chcemy wyświetlić jako obraz tła. Tutaj ustawiamy „scenerię.obraz jpg ”jako obraz tła. Mamy również inną „div” w pierwszym div, a nazwa tego div to „tekst”. A w drugim div mamy nagłówek „H1” i wpisujemy nagłówek w tym „Div”. Następnie zamknij oba znaczniki „div”.
Kod CSS
W danym kodzie CSS zmieniamy krycie obrazu tła, ale nagłówek tekstu, który piszemy na tym obrazie, pozostaje taki sam. Krycie obrazu tła nie zmienia krycia tekstu.
Używamy „IMG-BG”, która jest nazwą klasy obrazu, i ustawiamy krycie obrazu jako „0.4 ”. Ustawiamy obraz „pozycję” tła na „Absolute”. „Left” i „Top” są ustawione na „0”. „Szerokość”, którą tutaj ustawiamy, to „100%” dla obrazu tła, a „wysokość” to „Auto”. Następnie projektujemy nasz tekst, gdy wyrównujemy go w „centrum” i ustawiamy „rodzinę czcionki” na „algierskie”. Używamy „czarnego” jako koloru czcionki.
Wyjście
Możesz zobaczyć, że obraz na tle nie jest w jego oryginalnym kolorze, ponieważ używamy „0.4 ”krycie na tym obrazie tła. Jednak nie ma wpływu na tekst zapisany na obrazie. W ten sposób możemy zmienić krycie obrazu bez wpływu na tekst.
Przykład nr 2
Zmieniając poprzedni kod HTML, stworzyliśmy inny przykład. Ale tym razem dodaliśmy obraz za pomocą właściwości CSS.
Ten plik określa dwa nagłówki w klasie „Div”. W tym kodzie mamy „H1” i „H2” w klasie DIV o nazwie „Hero”. Dodamy obraz tła w podanym poniżej kodzie CSS.
Kod CSS
Pozycja klasy DIV „Hero” jest „względna”, jej wysokość wynosi „90 VH”, a jej szerokość wynosi „90%”. Wyświetlacz dla tej klasy DIV „Hero” to „Flex”, pozycja w „centrum” i „Justify-Content” do „Centrum”. „:: przed” to „pseudo-sektor” używany do umieszczania obrazu tła przed wybranym elementem. Umieszczamy „treść”, ustawiamy „obraz tła” za pomocą „URL” i umieszczamy nazwę obrazu w tym adresie URL. „Rozmiar tła” ustawia obraz tła na „pokrycie”, a jego „pozycja” jest „absolutna”. Następnie „góra”, „dolny”, „lewy” i „prawy” to „0px”. Tutaj zmieniamy „krycie” na „0.4 ”. Teraz stosujemy styl do nagłówków. Nagłówkowa „pozycja”, którą ustawiliśmy, jest „względne”. Kolor nagłówka jest „czerwony”. Rozmiar tego nagłówka to „25px”, a „wysokość linii” to „0.9 ”. Wyrównujemy ten kierunek do „centrum”. Kolor drugiego nagłówka jest „czarny”.
Wyjście
Tutaj obraz tła nie pojawia się w oryginalnym kolorze, ponieważ ustawiliśmy krycie obrazu w kodzie CSS. Ale tekst na obrazie pojawia się w oryginalnym kolorze.
Przykład nr 3
Tworzymy inny plik HTML. W tym kodzie tworzymy trzy akapity w klasie DIV, a klasa DIV, którą utworzyliśmy, nazywa się „ImageOpc”.
Kod CSS
Zamierzamy wstawić obraz tła do kodu CSS. Używamy więc pseudo-selektora „przed”, który zlikwidowaliśmy w poprzednim przykładzie. Tutaj kod jest taki sam jak w drugim przykładzie, ale zmieniamy obraz tła i używamy właściwości „krycia” na innym obrazie. Tutaj „lewy”, „prawy”, „dolny” i „top” są ustawione na „0”. I „0.4 ”krycia jest używany dla tego obrazu. Ustawiliśmy akapit w pozycji „względnej”. I ustaw swoją wysokość równą „0.9px ”. Zmieniamy również „rozmiar czcionki” akapitu i ustawiamy to na „25px”. W akapit. I ustawiliśmy jego najwyższe „200px”.
Wyjście
Możesz zobaczyć, że obraz tła pokazuje przejrzystość. Tutaj używamy 40% krycia na tym obrazie tła, ale możesz zauważyć, że nie wpływa to na tekst zapisany na obrazie tła.
Przykład nr 4
Dokonujemy drobnych zmian w poprzednim kodzie HTML. W tym przykładzie używamy czterech akapitów w nazwach „Div” i „GiveGivingageOpc” dla tej klasy DIV.
Kod CSS
Ten kod CSS jest taki sam jak poprzedni kod. Jednak zmieniamy „URL” obrazu tła. Używamy „scenariusza tła.Obraz jpg ”tutaj. Pamiętaj, że używasz poprawnego rozszerzenia obrazu z nazwą obrazu. Musisz umieścić właściwą ścieżkę obrazu w tym „URL”. Używamy „0.5 ”wartość krycia obrazu tła w tym przypadku. W tym przykładzie „używamy wielkości czcionki”, to „30px”. Ustawiliśmy rodzinę czcionki akapitu na „Times New Roman”, a ponadto jest „200px”. Akapit pojawia się w „Maroon” i jest „odważniejszy” w „W-Wight”.
Wyjście
Ten obraz tła pokazuje 50% krycia, gdy ustawiamy jego wartość na „0.5 ”, ale tekst pozostaje taki sam. Ta wartość krycia nie ma zastosowania do tekstu.
Wniosek
Przedstawiliśmy ten przewodnik, w którym zmieniamy krycie obrazu tła bez wpływu na tekst. W ten sposób możesz określić, jak zmienić krycie obrazu tła w CSS bez wpływu na tekst. Wyjaśniliśmy i pokazaliśmy różne przykłady, w których używamy właściwości „krycia” do zmiany krycia obrazu tła, ale tekst pozostaje taki sam. Po nauce tego przewodnika możesz wstawić obrazy tła w swoich projektach i ustawić krycie obrazu tła bez wpływu na tekst za pomocą właściwości CSS.