CSS ашиглан арын дэвсгэр хөтөчийн цонхны бүх өргөнийг сунгах чадвар нь зөвхөн хамгийн сүүлийн үзүүлэлт болох CSS3 гарсны дараа гарч ирэв. Харамсалтай нь одоогоор олон тооны вэб серфингчид CSS3-ийн тодорхойлолтыг ойлгодоггүй эртний хөтчүүдийг ашиглаж байна. Тиймээс та сонголтоо хийх хэрэгтэй - эсвэл арай тохиромжгүй, гэхдээ хөндлөн хөтөч шийдэл эсвэл өндөр технологийн технологийг ашиглах хэрэгтэй, гэхдээ хязгаарлагдмал үзэгчдэд зориулж болно. Хоёр хувилбарыг хоёуланг нь авч үзье.
Шаардлагатай
HTML ба CSS-ийн анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Эхний сонголт нь CSS хэлний өмнөх үзүүлэлтүүд дээр үндэслэсэн болно. Та нэг нэгнийхээ дээр давхцсан хоёр давхрагатай HTML кодын бүтцийг бий болгох хэрэгтэй. Хуучин каскадын хэв маягийн тодорхойлолтын хэлний тодорхойлолтоор давхаргыг (div) дэлгэцийн өргөн хүртэл сунгаж болно. Давхаруудын доод хэсэгт та арын дэвсгэр зургийг байрлуулах хэрэгтэй бөгөөд дээд хэсэгт нь хуудасны бүх агуулгыг байрлуулах болно. Баримтын үндсэн хэсэгт байрлах ийм бүтэц дараах байдалтай байж магадгүй юм.
Энэ нь хуудасны агуулга байх болно
Энэ бүтцийн хэв маягийн тодорхойлолтыг гарчгийн хэсэгт байрлуулсан байх ёстой. Жишээлбэл, энэ нь:
html, их бие {
маржин: 0px;
өндөр: 100%;
}
# арын дэвсгэр {
албан тушаал: туйлын;
өргөн: 100%;
өндөр: 100%;
}
# бие {
албан тушаал: туйлын;
өргөн: 100%;
өндөр: 100%;
z-индекс: 2;
}
Энд ID-ийн дэвсгэр (энэ бол таны арын зураг) ба их бие (энэ нь хуудасны агуулгын давхарга юм) бүхий давхаргыг үнэмлэхүй байршил, 100% өргөн ба өндөрт тохируулсан байна. Нэмж дурдахад агуулгын давхаргад z-index = 2. цуврал дугаарыг олгоно. Энэ нь давхаргын "гүн" -ийг тодорхойлдог - энэ нь том байх тусам "доод" хэсгээс энэ давхарга байрладаг. Манай тохиолдолд энэ нь анхдагч z индексийг ашигладаг дэвсгэр давхаргаас дээш байх болно.
Алхам 2
Бүрэн код нь иймэрхүү харагдаж магадгүй юм:
html, их бие {
маржин: 0px;
өндөр: 100%;
}
# арын дэвсгэр {
албан тушаал: туйлын;
өргөн: 100%;
өндөр: 100%;
}
# бие {
албан тушаал: туйлын;
өргөн: 100%;
өндөр: 100%;
z-индекс: 2;
}
Энэ нь хуудасны агуулга байх болно
Фон.
Алхам 3
Хоёрдахь сонголт нь CSS3-т нэвтрүүлсэн дэвсгэр хэмжээтэй шинж чанарыг ашиглах болно. Үүний зэрэгцээ өмнө нь Mozilla Firefox, Google Chrome, Opera хөтөч ашиглаж байсан загварын тодорхойлолтуудад ижил төстэй шинж чанаруудыг нэмж оруулаарай. Энэ хувилбар дахь хэв маягийн тодорхойлолтын блок дараах байдалтай байж магадгүй юм.
HTML {
дэвсгэр: url (fon.png) давтагдахгүй төв төвийг засах;
-webkit-background-size: cover;
-moz-background-size: cover;
- дэвсгэр хэмжээ: бүрхүүл;
дэвсгэр хэмжээ: бүрхүүл;
}
Энд fon.png"
