Tekst CSS krycia

Krycie jest definiowane w CSS jako „przejrzystość”. Krycie tekstu to efekt przezroczystości, który stosujemy do dowolnego tekstu. Mamy dwie różne właściwości w CSS do ustawiania krycia tekstu. Aby ustawić krycie tekstu, użyjemy właściwości „krycia”, a także wartości alfa, która określa krycie tekstu w „RGBA”. Korzystając z właściwości krycia i modyfikując wartość alfa w RGBA, możemy dostosować krycie tekstu w CSS. Zakres kryty między „0.0 ”i„ 1.0.„Kolor„ całkowicie przezroczysty ”ma wartość„ 0.0 ”, podczas gdy kolor„ całkowicie nieprzejrzysty ”ma wartość„ 1.0 ”. W tym przewodniku użyjemy właściwości CSS do zmodyfikowania krycia tekstu.

Przykład nr 1: Korzystanie z właściwości kryzysowej

Potrzebujemy niektórych akapitów, aby użyć funkcji krycia w CSS. Zrobimy tutaj kilka akapitów HTML. Aby to zrobić, musimy najpierw skonstruować plik HTML. Kod Visual Studio to oprogramowanie, które będziemy korzystać do wykonania tych przykładów. Możesz to zrobić w każdym oprogramowaniu, takim jak notatnik. Tworzymy kilka „div” z różnymi nazwami w ciele. Wewnątrz każdego div tworzymy akapit z „

”Tag. Zrobimy trzy Divy z unikalnymi nazwami, takimi jak „T1”, „T2” i „T3”. Tworzymy akapity w tych divach. W rezultacie utworzono trzy akapity. Będziemy używać tego kodu HTML dla innych przykładów. Teraz przejdziemy do pliku CSS i zastosujemy krycie CSS do tekstu. W elemencie „głowicy” kodu HTML dodatkowo połączyliśmy plik CSS do tej strony HTML.

Ustawiliśmy oryginalny „czerwony” kolor na nagłówek, używając właściwości „kolor” i stylizujemy ten nagłówek jako „kursywa”. Następnie używamy nazwy pierwszego div „T1”, w którym mamy akapit i ustawiamy „rozmiar czcionki” na „16px”. Używamy „czerwonego” do czcionki „kolor”. Ale w następnym wierszu używamy właściwości „krycia”. Tak więc, kiedy użyjemy tej właściwości, doda ona krycie do efektu przezroczystości naszego koloru tekstu. Tutaj ustawiamy „0.8 ”wartość tej właściwości„ krycia ”. Do następnego „Div.T2 ”ustawiamy ten sam„ wielkości czcionki ”„ 16px ”i ten sam„ czerwony ”„ kolor ”. Ale tym razem wartość „krycia” jest zmieniana na „0.5 ”dla drugiego akapitu Div. Dla trzeciego i ostatniego „Div.t3 ”, używamy„ 0.3 ”jako wartość„ krycia ”.

Oto dane wyjściowe, patrz, że kolor tekstu pojawia się z różnymi wartościami krycia. Kolor nagłówka to oryginalny czerwony kolor, ale kolor akapitów pojawia się z pewnymi wartościami krycia. Wszystkie trzy akapity mają różne wartości krycia.

Przykład nr 2: Korzystanie z wartości alfa w RGBA

Tutaj wykorzystamy wartości RGBA, w których „A” jest dla wartości alfa, a ta wartość alfa ustawia krycie tekstu. Po pierwsze, po prostu umieszczamy wartość RGB na nagłówek, a wartość RGB, której tu używamy. Następnie używamy słowa kluczowego „kursywa” do ustawienia „w stylu czcionki” nagłówka. Ustawiliśmy to również jako „rodzinę czcionki” i wykorzystujemy do tego czcionkę „algierską”. Jest wyrównany w „centrum”, wykorzystując właściwość „align tekstu”.

Następnie użyjemy pierwszego „Div.t1 ”i użyj wartości„ RGBA ”. Tutaj umieszczamy wartość „RGB” fioletowego koloru, a następnie ustawiamy wartość alfa również na „0.9 ”. Następnie ustawiliśmy tę samą wartość „RGB”, ale zmieniliśmy wartość alfa i ustawiliśmy ją na „0.7 ”. Mamy też kolejny akapit DIV i dla tego ostatniego „Div.T3 ”Używamy„ 0.5 ”wartość alfa, która ustawia krycie na„ 0.Wartość 5 ”.

Zwróć uwagę w rezultacie, jak zmienia się kolor tekstu w zależności od wartości alfa. Kolor nagłówka to oryginalny fiolet. Ale kolor akapitów ma pewne wartości alfa, które ustalają jego krycie. Wartości krycia we wszystkich trzech akapitach są różne.

Przykład nr 3:

Najpierw ustawymy „kolor tła” całego ciała i ustawym na „czarny”. Następnie ponownie używamy wartości RGBA, w których „A” oznacza wartość alfa. Ta wartość alfa określa krycie tekstu, jak omówiliśmy powyżej. Na początek po prostu dodajemy wartość RGB do nagłówka, numer RGB, którego tu używamy, symbolizuje kolor „jasnoszary”. Używamy pierwszego „Div.T1 ”i wartość„ RGBA ”, w której wkładamy wartość„ RGB ”o tym samym kolorze co nagłówek i ustawiamy wartość alfa na„ 0.7 ”. Następnie ustawiamy tę samą wartość „RGB”, jak poprzednio. Tym razem zmieniliśmy wartość alfa na „0.4 ”. Mamy również kolejny akapit Div i używamy „0.2 ”wartość alfa, aby zmienić krycie tego ostatniego„ Div.T3 ”akapit do„ 0.2 ”.

Obserwuj, jak kolor tekstu zmienia się wraz ze zmienia się wartość alfa. Nagłówek jest oryginalnym kolorem, ale kolor akapitów obejmuje wartości alfa, które określają ich krycie. Wszystkie trzy akapity mają wyraźne wartości krycia.

Przykład nr 4:

Tworzymy tutaj dziewięć różnych klas Div z unikalną nazwą dla każdej div i zamierzamy zastosować wszystkie wartości krycia na każdym Div w CSS.

Stylikujemy całe ciało i ustawiamy tekst w „środku” strony. Tak więc wszystkie akapity pojawiają się w „centrum”. Ustawiamy również „Bold” dla całego „ciała” za pomocą „czcionki” i ustawiamy rozmiar czcionki lub tekstu na „20px”. Nasz nagłówek pojawi się w oryginalnym kolorze „bordowym”, gdy ustawiamy ten kolor w właściwości „kolor”. „Algierski” to „rodzina czcionki” na nagłówek. Ustawiamy ten sam kolor dla wszystkich divs, używając właściwości „kolor”. We wszystkich akapitach DIV zmieniliśmy wartość „krycia”. W każdym div zmniejszamy wartość krycia o jedną dla innych divs, ustawiamy wartość „krycia” na „0.9 ”. Następnie, dla następnego div ustawiamy wartość tej właściwości krycia na „0.8 ”. Do trzeciego div używamy „0.7 ”wartość krycia i tak dalej. W ten sposób za każdym razem zmieniamy wartości krycia dla każdego div.

Tutaj spójrz na dane wyjściowe poniżej, wartości krycia tekstu zaczynają się od „0.9 ”i kończą na„ 0.1 ”. Oryginalny kolor jest również używany tutaj do nagłówka, a wszystkie akapity zawierają wartości krycia.

Wniosek:

Stworzyliśmy dla Ciebie ten przewodnik, w którym zmieniamy krycie tekstu i uczymy się, jak modyfikować krycie tekstu w CSS. Wyjaśniliśmy tutaj, że krycie jest używane do nadania przez tekst przezroczystego efektu. Zbadaliśmy również właściwości CSS, za pomocą których możemy zmienić krycie tekstu. Opisaliśmy i pokazaliśmy, jak korzystać z właściwości „krycia” i wartości RGBA „alfa” w celu zmiany krycia tekstu.