Загварууд

background-attachment шинж чанарын өгөгдмөл утга нь гүйлгэх бөгөөд энэ нь дэвсгэр нь элементийн дагуу гүйлгэж байна гэсэн үг юм. Хэрэв та утгыг тогтмол гэж тохируулсан бол байрлал нь тогтмол болно.

Үндсэн хэсэг, html, үндсэн ( /* чухал */ өндөр: 100%; ) .cd-fixed-bg ( мин-өндөр: 100%; дэвсгэрийн хэмжээ: бүрхэвч; дэвсгэр-хавсралт: тогтмол; дэвсгэр-давталт: давтагдахгүй background-position: center center ) .cd-fixed-bg.cd-bg-1 (background-image: url("../img/cd-background-1.jpg"); ) .cd-fixed- bg.cd-bg-2 (арын дэвсгэр зураг: url("../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 (арын дэвсгэр зураг: url(" "../img/cd-background-3.jpg" ) .cd-fixed-bg.cd-bg-4 (арын дэвсгэр зураг: url("../img/cd-background-4.jpg" ); .cd-scrolling-bg ( мин-өндөр: 100%; )

Энэхүү богино хичээл нь вэб сайт дээрээ (эсвэл нэг хуудасны хуудсан дээр) хэрэглэгч хуудсыг гүйлгэх үед нэг зургаас нөгөөд жигд урсах сайхан тогтсон дэвсгэрийг хэрхэн бүтээх тухай байх болно. CSS нь дэвсгэр зургийг засах боломжийг олгодог background-attatchment: fixed өмчтэй. Өөрөөр хэлбэл, та хуудсыг гүйлгэх үед энэ нь хуудастай хамт гүйлгэхгүй. Гэхдээ CSS-д гүйлгэх үед зургийг өөрчлөх боломж байхгүй тул бид Javascript-г ашиглах болно.

Сайтын арын дэвсгэрийг зассан

Та миний юу бичиж байгааг ойлгохгүй байж магадгүй, тиймээс демо-г үзээрэй, та өөрөө энэ сайхан эффектийг харах болно:

Татаж авах

Вэб сайтын арын дэвсгэрийг хэрхэн өөрчлөх вэ?

HTML

Бид энэ нөлөөг үзүүлж буй хуудасны HTML бүтцийг тодорхойлж эхлэх болно.

Шошгонд