3.1 background-repeat xüsusiyyəti
CSS-də background-repeat və background-size xüsusiyyətləri elementlərin içində fon şəkillərinin necə təkrarlanması və miqyaslanmasını idarə etmək üçün istifadə olunur. Bu xüsusiyyətlər veb tərtibatçılara vizual baxımdan cəlbedici fonlar yaratmaq üçün elastik alətlər təqdim edir. Gəlin hər birini daha ətraflı nəzərdən keçirək.
background-repeat xüsusiyyəti fon şəkillərinin elementdə necə təkrarlanacağını müəyyən edir. Varsayılan olaraq, fon şəkli həm üfüqi, həm də şaquli olaraq təkrarlanır.
Dəyərlər
repeat: şəkil həm üfüqi, həm də şaquli olaraq təkrarlanır (varsayılan)repeat-x: şəkil yalnız üfüqi olaraq təkrarlanırrepeat-y: şəkil yalnız şaquli olaraq təkrarlanırno-repeat: şəkil təkrarlanmır
1. repeat dəyəri:
Şəkili həm üfüqi, həm də şaquli olaraq təkrarlayır.
.repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat;
border: 1px solid #000;
}
<div class="repeat">Üfüqi və şaquli təkrarlama</div>
2. repeat-x dəyəri:
Şəkili yalnız üfüqi olaraq təkrarlayır.
.repeat-x {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-x;
border: 1px solid #000;
}
<div class="repeat-x">Yalnız üfüqi təkrarlama</div>
3. repeat-y dəyəri:
Şəkili yalnız şaquli olaraq təkrarlayır.
.repeat-y {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-y;
border: 1px solid #000;
}
<div class="repeat-y">Yalnız şaquli təkrarlama</div>
4. no-repeat dəyəri:
Şəkil təkrarlanmır.
.no-repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
border: 1px solid #000;
}
<div class="no-repeat">Təkrarlama yoxdur</div>
Kodun izahı
.repeat: şəkil həm üfüqi, həm də şaquli olaraq təkrarlanır, bütün elementi doldurur.repeat-x: şəkil yalnız üfüqi olaraq təkrarlanır.repeat-y: şəkil yalnız şaquli olaraq təkrarlanır.no-repeat: şəkil təkrarlanmır, yalnız bir dəfə göstərilir
3.2 background-size xüsusiyyəti
background-size xüsusiyyəti fon şəkilinin ölçüsünü idarə edir. Bu, şəkili dəyişdirməyə imkan verir ki, o, elementə daha yaxşı uyğun gəlsin.
Dəyərlər:
auto: şəkilin ölçüsü avtomatik müəyyən olunur (default olaraq)cover: şəkil proporsiyaları qoruyaraq elementi tamamilə əhatə edəcək şəkildə ölçülürcontain: şəkil proporsiyaları qoruyaraq elementi tamamilə uyğunlaşacaq şəkildə ölçülür- Absolut ölçülər: məsələn, 100px 50px şəkilin eni və hündürlüyünü piksel ilə müəyyən edir
- Faiz dəyərləri: məsələn, 50% 50% şəkilin eni və hündürlüyünü elementin ölçüsünün faizində müəyyən edir
1. Default ölçü (auto):
Şəkilin ölçüsü avtomatik olaraq müəyyən edilir (default).
.size-auto {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-size: auto;
border: 1px solid #000;
}
<div class="size-auto">Default ölçü (auto)</div>
2. cover:
Şəkil proporsiyaları qoruyaraq elementi tamamilə əhatə edəcək şəkildə ölçülür.
.size-cover {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: cover;
border: 1px solid #000;
}
<div class="size-cover">Elementi tam əhatə etmə (cover)</div>
3. contain:
Şəkil proporsiyaları qoruyaraq elementi tam uyğunlaşacaq şəkildə ölçülür.
.size-contain {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: contain;
border: 1px solid #000;
}
<div class="size-contain">Tam uyğunlaşma (contain)</div>
4. Absolut ölçülər:
Məsələn, 100px 50px şəkilin eni və hündürlüyünü piksel olaraq müəyyən edir.
.size-pixels {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 100px 50px;
border: 1px solid #000;
}
<div class="size-pixels">Piksel ölçüsü (100px 50px)</div>
5. Faiz dəyərləri:
Məsələn, 50% 50% şəkilin eni və hündürlüyünü elementin ölçüsünün faizində müəyyən edir.
.size-percent {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 50% 50%;
border: 1px solid #000;
}
<div class="size-percent">Faiz ölçüsü (50% 50%)</div>
Kodun izahı:
.size-auto: şəkilin ölçüsü avtomatik müəyyən olunur.size-cover: şəkil proporsiyaları qoruyaraq elementi tamamilə əhatə edəcək şəkildə ölçülür. Şəklin bəzi hissələri kəsilə bilər.size-contain: şəkil proporsiyaları qoruyaraq elementi tam uyğun gələcək şəkildə ölçülür. Şəkil tam görünəcək, amma boş sahələr ola bilər.size-pixels: şəkilin ölçüsü piksel olaraq müəyyən edilib (eni 100px və hündürlüyü 50px).size-percent: şəkilin ölçüsü elementin ölçüsünün faizində müəyyən edilib (eni 50% və hündürlüyü 50%)
3.3 background-repeat və background-size birlikdə istifadə edilməsi
background-repeat və background-size xüsusiyyətləri tez-tez istənilən fon təsvirlərinin göstərilməsi effektinə nail olmaq üçün birlikdə istifadə olunur.
İstifadə nümunəsi:
.combined {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #000;
}
<body>
<div class="combined">Fon təsviri təkrarlanmır və elementin səthini örtəcək şəkildə miqyaslanır</div>
</body>
Kodun açıqlaması:
background-repeat: no-repeat;: təsvir təkrarlanmırbackground-size: cover;: təsvir elementin səthini tamamilə örtəcək şəkildə miqyaslanır, proporsiyalar qorunur. Görüntünün bəzi hissələri kəsilə bilər
GO TO FULL VERSION