4.1 Əsas prinsiplər
CSS bir elementdə bir neçə fon şəkli istifadə etməyə imkan verir, bu da mürəkkəb və maraqlı vizual effektlər yaratmaq üçün geniş imkanlar təqdim edir. background-image və onunla əlaqəli digər xüsusiyyətlər vasitəsilə fon şəkillərinin bir neçə qatını təyin etmək, onların sırasını, mövqeyini və digər xüsusiyyətlərini idarə etmək mümkündür.
Sintaksis
Bir neçə fon şəkil təyin etmək üçün, müxtəlif şəkillər vergüllə ayrılaraq göstərilir:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Hər bir səviyyənin tənzimlənməsi üçün xüsusiyyətlər
background-image ilə yanaşı, fon şəkillərinin hər bir qatını tənzimləmək üçün aşağıdakı, həmçinin vergüllə ayrılmış çoxsaylı dəyərləri dəstəkləyən xüsusiyyətlərdən istifadə olunur:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Qatların sırası
Şəkillər göstərilmə ardıcıllığına görə qatlarla yerləşdirilir: ilk şəkil istifadəçiyə ən yaxın, sonuncu isə elementin fonuna ən yaxın olur.
4.2 Şəkillərin üst-üstə qoyulması
Şəkillərin sadə şəkildə üst-üstə qoyulması.
İstifadə nümunəsi:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg">Çoxsəviyyəli fon</div>
</body>
Kodun izahı:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: iki arxa fon şəkli təyin edirbackground-position: center, top left;: birinci şəkli mərkəzdə, ikinci şəkli yuxarı sol küncdə yerləşdirirbackground-repeat: no-repeat, no-repeat;: hər iki şəkil üçün təkrarlanmanı söndürür
4.3 Bir neçə şəkildən istifadə
Fərqli ölçülərdə bir neçə fon şəkilindən istifadə.
İstifadə nümunəsi:
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes">Ölçüləri ilə çoxsəviyyəli fon</div>
</body>
Kodun açıqlaması:
background-size: 50% 50%, 30% 30%;: birinci şəkli elementin eni və hündürlüyünün 50%-nə, ikinci şəkli isə elementin eni və hündürlüyünün 30%-nə qədər miqyaslandırır
4.4 Şəffaf şəkillər
Şəffaflıqla şəkil üst-üstə qoyulması.
İstifadə nümunəsi:
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<body>
<div class="multi-bg-opacity">Çoxsəviyyəli fon şəffaflıqla</div>
</body>
Kodun izahı:
background-size: cover, 50%;: birinci şəkildə elementin bütün sahəsini örtəcək şəkildə miqyaslanır, ikinci şəklin isə ölçüsü elementin 50%-ə qədər azalır::before: pseudo-element fon şəkilləri üzərində yarı şəffaf bir qara qat əlavə edir
4.5 Fonun kəsilməsi
Bir neçə fona malik olan görüntülərlə digər xüsusiyyətləri istifadə etmək.
background-origin və background-clip
Bu xüsusiyyətlər fon görüntüsünün göstərildiyi sahəni və fonun kəsilmə sahəsini idarə edir.
İstifadə nümunəsi:
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
<body>
<div class="multi-bg-origin-clip">Çoxsəviyyəli fon background-origin və background-clip ilə</div>
</body>
Kodun izahı:
background-origin: padding-box, content-box;: birinci şəkil padding-in daxili kənarından başlayır, ikinci şəkil isə elementin məzmunundan başlayırbackground-clip: border-box, padding-box;: birinci şəkil sərhədin xarici kənarı ilə kəsilir, ikinci şəkil padding-in daxili kənarı ilə kəsilir
GO TO FULL VERSION