Az egyik leggyakoribb dolog, amelyet webfejlesztőként meg kell tennie, az a HTML-elem háttérszínének megváltoztatása. De zavaró lehet, ha nem érted a CSS background-colortulajdonság használatát.
A cikkben megvitatjuk
- egy HTML elem alapértelmezett háttérszínértéke
- hogyan lehet megváltoztatni egy div háttérszínét, ami nagyon gyakori elem
- - a CSS dobozmodell mely részeit érinti a
background-colortulajdonság, és - a tulajdonság különböző értékeit.
Egy elem alapértelmezett háttérszíne
A div alapértelmezett háttérszíne transparent. Tehát ha nem adja meg a div háttérszínét, akkor az a szülő elemének színét jeleníti meg.
Div. Háttérszínének megváltoztatása
Ebben a példában megváltoztatjuk a következő div-ek háttérszíneit.
I love HTML I love CSS I love JavaScript Stílus nélkül ez vizuálisan a következőket fogja jelenteni.
Változtassuk meg a divek háttérszínét azáltal, hogy stílusokat adunk az osztályokhoz. Kövesse nyomon, ha kipróbálja a HTML fájl példáit.
.div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript Ez a következőket eredményezi:
Menő! Sikeresen megváltoztattuk ennek a div háttérszínét. Ezután ismerkedjünk meg többet erről a tulajdonságról. Lássuk, hogyan befolyásolja a háttérszín tulajdonság a CSS-box modell egyes részeit.
Háttérszín és a CSS doboz modell
A CSS dobozmodell szerint az összes HTML elem téglalap alakú dobozként modellezhető. Minden doboz 4 részből áll, az alábbi ábra szerint.
Elolvashatja a doboz modelljét, ha nem ismeri azt. A kérdés az, hogy a doboz modell melyik részét érinti, ha megváltoztatja a div háttérszínét? Az egyszerű válasz a kitöltési terület és a tartalmi terület. Erősítsük meg ezt egy példával.
body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } This is the parent div which contains the div we are testing
This example shows that changing the background color of a div does not affect the border and margin of the div.
Ennek eredményeként:
A fenti példából láthatjuk, hogy a margó területét és a határterületet nem befolyásolja a háttérszín változása. Megváltoztathatjuk a szegély színét a border-color tulajdonság használatával. A margóterület átlátszó marad, és tükrözi a szülőtartály háttérszínét.
Végül beszéljük meg azokat az értékeket, amelyeket a háttérszín tulajdonság elérhet.
Háttér-szín értékek
A színtulajdonsághoz hasonlóan a háttérszín tulajdonság is hat különböző értéket vehet fel. Vizsgáljuk meg egy példával a három leggyakoribb értéket. A példában a div háttérszínét vörösre állítjuk, különböző értékekkel.
/* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } The background property can take six different values.
The background property can take six different values.
The background property can take six different values.
Figyelje meg, hogy mindegyik ugyanazzal a háttérszínnel rendelkezik.
A background-colortulajdonság további értékei lehetnek a HSL-érték, a speciális kulcsszó-értékek és a globális értékek. Íme néhány példa ezekre.
/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; Ezen értékekről itt olvashat bővebben.
Extra megjegyzés
Egy elem háttérszínének beállításakor fontos, hogy a háttérszín és az abban szereplő szöveg színe kontrasztaránya elég magas legyen. Ennek célja, hogy a gyengénlátók könnyen olvashassák a szöveget.
Tekintsük ezt a két div-t.
The contrast between the background color of the first div and the color of the text is not high enough for everyone to see. So unless you are the only one using the website you are building and you have very good eyesight, you should avoid such color combinations.
The second div has a much better contrast ratio between the background color and the color of the text . Thus, it is more accessible and clearer for people to read.
Conclusion
In this article, we saw how you can change the background-color of a div. We also discussed which parts of the CSS box model are affected by the change in background-color. Finally, we discussed the values the background-color property can take.
I hope you found this article useful. Thanks for reading.