1.1 background-color xassəsi
background-color xassəsi element üçün fon rəngi təyin edir. Bu, fonu rənglə doldurmağa imkan verir, məzmunu vizual olaraq ayırır və mətni və digər elementləri daha yaxşı qavranılmasını təmin edir.
Dəyərlər:
- Rəng adları: əvvəlcədən müəyyən edilmiş rəng adlarından istifadə etmək olar, məsələn:
red,blue,green - Onaltılıq dəyərlər: məsələn,
#ff0000,#00ff00,#0000ff - RGB: məsələn,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: məsələn,
rgba(255, 0, 0, 0.5)(yarımşəffaf qırmızı) - HSL: məsələn,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: məsələn,
hsla(0, 100%, 50%, 0.5)(yarımşəffaf qırmızı).
İstifadə nümunəsi:
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<body>
<div class="color-red">Bu elementin fonu qırmızıdır.</div>
<div class="color-hex">Bu elementin fonu onaltılıq formatda verilmiş rəngdədir.</div>
<div class="color-rgba">Bu elementin fonu yarımşəffaf yaşıl rəngdədir.</div>
</body>
Kodun izahı:
background-color: red;: element üçün qırmızı fon təyin edirbackground-color: #3498db;: fon rəngini onaltılıq dəyərdən istifadə edərək təyin edirbackground-color: rgba(46, 204, 113, 0.7);: RGBA istifadə edərək yarımşəffaf yaşıl fon təyin edir
1.2 background-image xüsusiyyəti
background-image xüsusiyyəti element üçün fon şəkli təyin edir. Bu, veb səhifənin dizaynını və vizual qəbulunu yaxşılaşdıraraq vizual cəhətdən cəlbedici fonlar yaratmaq üçün şəkillərdən istifadə etməyə imkan verir.
Dəyər olaraq, şəkilin URL-ni keçməlisiniz — fon kimi istifadə olunacaq şəkilin yolunu göstərmək. Məsələn, url('image.jpg').
İstifadə nümunəsi:
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<body>
<div class="background-url">Bu elementin fon şəkli var.</div>
</body>
Kodun izahı:
background-image: url('https://via.placeholder.com/150');: element üçün fon kimi bir şəkil təyin edir. Bu halda, şəkilin URL-i istifadə olunur
Background-image xüsusiyyətinin üstünlükləri:
- Vizual cəlbedicilik: fon şəkillərindən istifadə daha cəlbedici və maraqlı veb səhifələr yaratmağa imkan verir.
- Kontekst: fon şəkilləri əlavə kontekst və ya məlumat təqdim edə bilər, səhifə məzmununun vizual qəbulunu gücləndirə bilər.
- Brendinq: fon şəkilləri brendinqin bir hissəsi ola bilər, saytın vahid üslubunu və tanınmasını təmin edə bilər.
Fon şəkillərinin istifadəsi üçün tövsiyələr:
- Şəkillərin optimallaşdırılması: səhifənin performansını yaxşılaşdırmaq üçün şəkilləri ölçülərini əhəmiyyətli dərəcədə keyfiyyət itkisi olmadan azaltmaqla optimallaşdırmaq vacibdir
- Brauzerlər arası dəstək: istifadə olunan şəkillərin bütün hədəf brauzerlərdə düzgün şəkildə göstərildiyinə əmin olun
- Alternativ mətn: əhəmiyyətli dərəcədə vacib olan şəkillər üçün məhdud imkanlı istifadəçilər üçün məlumatın ötürülməsinin alternativ üsullarını, məsələn, mətn təsvirləri ilə təmin etmək lazımdır
1.3 background-color və background-image birlikdə istifadə
background-color və background-image xüsusiyyətləri birlikdə istifadə edilə bilər ki, mürəkkəb və cəlbedici fonduslar yaradılsın. Məsələn, hansısa səbəbdən fon şəkli yüklənməsə, onun əvəzinə görünəcək fon rəngi təyin etmək, ya da rəngli fonla yarı şəffaf şəkil birləşdirərək istifadə etmək olar.
İstifadə nümunəsi:
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
<body>
<div class="combined-background">
Bu element həm şəkil, həm də fon rəngi birləşdirilmiş bir fonda malikdir.
</div>
</body>
Kodun izahı:
background-color: #3498db;: fon rəngini təyin edirbackground-image: url('https://via.placeholder.com/150');: fon şəklini təyin edirwidth: 300px;height: 300px;: elementin ölçülərini təyin edircolor: white;: mətnin rəngini fon üzərində daha asan oxuna bilməsi üçün təyin edirdisplay: flex;align-items: center;justify-content: center;text-align: center;: mətni elementin içində mərkəzləşdirirborder: 1px solid #000;: elementi vizual olaraq ayırmaq üçün çərçivə əlavə edir
GO TO FULL VERSION