CSS Kolor tła krycia
Przykład 1:
Otwórz plik HTML i utwórz cztery nagłówki w pliku HTML, abyśmy mogli zastosować kolor tła i zmienić krycie kolorów za pomocą CSS. W tym samouczku używamy Visual Code Studio do uruchamiania tych kodów HTML i CSS. Tworzymy plik HTML w tym oprogramowaniu i piszemy HTML. Kod znajduje się na poniższym obrazku:
To jest obraz kodu HTML, który jest wspomniany powyżej. Zmienimy krycie koloru tła wszystkich nagłówków i pokażemy kolor o różnych wartościach krycia.
Kod CSS:
Utworzymy plik CSS, w którym używamy właściwości CSS do zmiany krycia koloru tła powyższych nagłówków. W tym kodzie używamy właściwości CSS „krycia”.
W celu nagłówka 1 „H1” ustawiamy „kolor tła” na „żółty”. „Krycie” to „0.4 ”dla tego nagłówka, a kolor czcionki jest„ czarny ”. Nagłówek 2 „kolor tła” jest również „żółty”, ale „krycie” to „0.6 ”. „Kolor tła” nagłówka 3 jest również „żółty”, ale tym razem „krycie” to „0.8 ”. Teraz nadchodzi nagłówek 4. Jego „kolor tła” jest taki sam jak poprzednie nagłówki, ale nie używamy tutaj koloru „krycia”. Tak więc „kolor tła” czwartego nagłówka pojawia się jako oryginalny „żółty” kolor.
Wyjście:
Różnica w wartości krycia koloru tła jest pokazana na tym wyjściu. Możesz zobaczyć różnicę między krycie koloru na tym obrazku.
Pierwszy kolor tła nagłówka pokazuje większą przezroczystość, ponieważ wartość krycia koloru tła wynosi „0.4 ”. Drugi nagłówek jest mniej przezroczysty niż kolor tła pierwszego nagłówka, ponieważ jego wartość nieprzezroczystości wynosi „0.6 ”. Następnie, tak samo jak drugi nagłówek, kolor tła trzeciego nagłówka jest mniej przezroczysty niż drugi. Tym razem „krycie” to „0.8 ”. A podczas ostatniego nagłówka użyliśmy oryginalnego żółtego koloru bez użycia wartości krycia.
Przykład nr 2:
W tym kodzie HTML mamy dwa nagłówki i cztery akapity. Każdy akapit jest napisany w klasie „Div”, a te klasy „Div” nazywane są odpowiednio „Pierwszym”, „drugim” i „trzecim”. Użyjemy tych nazw div, kiedy stylizujemy te akapity w CSS. Zmienimy krycie koloru tła każdego akapitu.
Kod CSS:
Jest to kod CSS, w którym ustawiamy kolor nagłówka 1 jako „zielony”. Tekst nagłówków 1 i 2 jest wyrównany w „środku” za pomocą „align tekstu”. Ustaw kolor „Div” „zielony” za pomocą „RGB (0, 151, 19)”. „Wyściółka” jest „10px” od lewej, prawej, górnej i dolnej. „Używany tutaj tekst” jest „uzasadniony” . Teraz użyj pierwszego div, w którym zmieniliśmy kolor tła zielony z wartością krycia „0.2 ”i jest napisany w formie„ RGBA (0, 151, 19, 0.2) ”. „Wartość krycia” to „0.2 ”. Wartość „alfa” reprezentuje „krycie”. Kolor tła drugiego DIV jest również zielony z wartością alfa „0.4 ”. Wartość alfa dla trzeciego div wynosi „0.7 ”z tym samym zielonym kolorem.
Wyjście:
Tutaj widać, że pierwszy akapit pokazuje większą przejrzystość niż drugi akapit, ponieważ wartość alfa lub krycia dla pierwszego akapitu wynosi „0.2 ”, co oznacza, że ma krycie„ 20%”. Krycie lub wartość alfa drugiego akapitu wynosi „0.4 ”i jest mniej przezroczysty niż pierwszy akapit. W kolorze tła trzeciego akapitu wartość alfa to „0.7 ”i zauważysz, że jest to mniej przejrzyste. W ostatnim akapicie kolor tła to oryginalny kolor „zielony”. W ostatnim nagłówku nie użyliśmy żadnej wartości alfa.
Przykład nr 3:
Dla trzeciego przykładu napiszemy różne nagłówki w HTML z „id”, a później użyć tych „id” do przekazywania różnych stylów tym nagłówkom w CSS.
Kod CSS:
W tym kodzie CSS zmienimy krycie koloru tła jednego koloru, a także użyjemy oryginalnego koloru w następnym akapicie. Kod CSS znajduje się w następującym obrazie:
Tutaj używamy identyfikatora akapitu, a następnie podajemy kolor tła dla wszystkich akapitów. W przypadku „P1” ustawiamy „RBGA (255, 0, 0, 0.3) ”, który jest kodem koloru„ czerwonego ”o wartości alfa„ 0.3 ”. Do „P11” używamy tego samego koloru, ale bez wartości alfa lub krycia. „P2” jest ustawiony jako „RGBA (0, 255, 0, 0.4) ”, który jest kodem„ zielonego ”koloru, a jego wartość alfa to„ 0.4 ”. Następnie „p22” ma ten sam „zielony” kolor bez wartości alfa. Wartość „P3” RGBA to „(0. 0. 225, 0.5) ”, który jest„ niebieskim ”kolorem o wartości alfa„ 0.5 ”. „P33” ma oryginalny kolor „niebieski” i nie ma krycia. „P5” ma wartość krycia „0.7 ”, a kod kolorów to„ RGBA (255, 255, 0, 0.7) ”, który reprezentuje„ żółty ”. „P55” nie zawiera żadnej wartości alfa. Kolor „P6” jest „różowy” o wartości krycia „0.8 ”, a kod jest napisany jako„ RGBA (255, 0, 255, 0.8) ”. Ostatni akapit, „P66”, ma „kolor tła” „różu” bez nieprzezroczystości.
Tutaj kolor tła pierwszego akapitu jest czerwony, ale o wartości krycia 0.3, co czyni go bardziej przezroczystym. Następny akapit zawiera oryginalny czerwony kolor tła i możesz łatwo obserwować różnicę między oryginalnym kolorem a kolorem, gdy używamy wartości krycia. W trzecim akapicie kolor tła jest wyświetlany jako zielony o wartości krycia „0.4 ”. W czwartym akapicie kolor tła jest „zielony” bez żadnej wartości alfa. Wyświetlany jest „niebieski” kolor w piątym akapicie, a jego wartość krycia wynosi „0.5 ”. Oryginalny „niebieski” kolor tła jest również pokazany w „szóstym” akapicie. Następny akapit pokazuje „szary” kolor używany z „0.Wartość kryzysu 6 ”i ten oryginalny szarość jest również używana w następnym akapicie jako kolor tła. „Żółty” kolor ma „0.7 ”krycie, podczas gdy„ Cerise ”ma„ 0.8 ”. Oba oryginalne kolory są również wyświetlane w kolorach tła akapitu.
Wniosek
Ten samouczek jest zapewniony dla Ciebie, abyś mógł nauczyć się koncepcji krycia koloru tła w CSS. Nauczyliśmy się dwóch metod modyfikacji krycia: jeden to przy użyciu właściwości „krycia”, a drugie przy użyciu „rgba”, w której „alfa” jest używany do ustawiania wartości przezroczystości koloru tła. Pokazaliśmy kolory tła o wartości krycia lub alfa i bez wartości krycia. Wypróbuj te przykłady, a następnie użyj tych wartości krycia w swoich kodach.