background-attachment
Misol
Sahifa bilan birga aylanmaydigan (fixed) background-image:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
background-attachment xususiyati fon rasmi sahifaning qolgan qismi bilan birga aylanishini yoki qotirilgan bo‘lishini belgilaydi.
| Standart qiymat: | scroll |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS1 |
| JavaScript sintaksisi: | object.style.backgroundAttachment="fixed" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS sintaksisi
background-attachment: scroll|fixed|local|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| scroll | Fon rasmi sahifa bilan birga aylanadi. Bu standart qiymat |
| fixed | Fon rasmi sahifa bilan birga aylanmaydi |
| local | Fon rasmi element tarkibi bilan birga aylanadi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Sahifa bilan birga aylanadigan (scroll) background-image. Bu standart qiymat:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
O‘zingiz sinab ko‘ring »
Misol
Oddiy parallaks aylantirish effektini qanday yaratish mumkin (3D chuqurlik illyuziyasini hosil qilish):
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS fon
HTML DOM ma’lumotnomasi: backgroundAttachment xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!