CSS'deki arka plan rengi özelliği, düz renkleri bir öğeye arka plan olarak uygular. İşte bir örnek:
html ( background-color: #82a43a; )Yukarıda kullanılan örnek ( #82a43a), onaltılık kod olarak adlandırılır ve CSS'nin tek bir rengi temsil etmesi gereken birkaç yoldan biridir. Doğru onaltılık kodları bulmanın birkaç yolu vardır. Bir tasarım aracı kullanmış olan herkes, buna benzer bir renk seçici gördü:
Hex kodları, CSS'de bir renk bildirmenin bir yoludur. Ayrıca kullanabileceğiniz bir sürü isim var, örneğin:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Bu renkler çok esnek değildir, ancak bir tutamda kullanışlı olabilirler. Onaltılık kodlardan daha kolay hatırlanırlar ve tonlarca vardır.
Renk bildirmenin başka bir yolu da RGB, RGBa, HSL veya HSLa kullanmaktır:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Onaltılık kodlardan farklı olarak, bu değerler çok kullanışlı olabilen şeffaflığa (alfa) izin verir. RGBa veya HSLa hakkında daha fazla bilgi edinin.
Demo
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem arka plan rengini görün.
İlişkili
- arka plan eki
- arka plan klibi
- arka plan görüntüsü
- arkaplan kökenli
- arka plan konumu
- arkaplan tekrar
- arkaplan boyutu
Daha fazla kaynak
- CSS3 spesifikasyonu
- MDN
Tarayıcı Desteği
Onaltılık kodlar ve çoğu renk adı her yerde çalışır. RGBa ve HSLa'nın kendi tarayıcı desteği setleri vardır: RGBa ve HSLa.
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| İşler | İşler | İşler | İşler | İşler | İşler | İşler |