Вэбсайтаа сонирхож үзээрэй
Зураг нь сонирхолтой вэбсайтын загваруудын чухал хэсэг юм. Энэ нь арын зургийг ашиглах явдал юм. Эдгээр нь хуудсын талбарын ард ашиглагддаг зургууд болон графикууд нь агуулгын хуудсын нэг хэсэг болгон толилуулсан зургуудтай харьцуулахад ашиглагддаг. Эдгээр дэвсгэр зураг нь хуудсанд харагдах сонирхолыг нэмж өгч, хуудас дээр хайж болох харааны загварт хүрэхэд тань туслах болно.
Хэрэв та арын зурган дээр ажиллаж эхэлбэл, танд зураг тохируулахыг хүсч байгаа хуудас руу орно.
Энэ нь өргөн хүрээний төхөөрөмжүүд болон дэлгэцийн хэмжээнүүдэд хүргэж байгаа хариу вэбсайтуудад үнэн зөв юм.
Вэб дизайнеруудын хувьд зураг бүрийг тохирохгүй байхын тулд арын зургийг сунгах хүсэл нь вэбсайтын дизайнеруудын нийтлэг хүсэл юм. Тогтвортой хэмжээтэй тохируулахын оронд зураг өлгөх нь вэб хөтчийн цонх хэр өргөн, нарийн байгаагүйгээр хуудсыг тааруулах боломжийг олгодог.
Хуудасны арын дэвсгэр дээр байршуулахын тулд зургийг сунгах хамгийн сайн арга бол CSS3 өмчийг, дэвсгэрийн хэмжээгээр ашиглах явдал юм. Жишээ нь хуудасны биеийн арын дэвсгэр зургийг ашигладаг, дэлгэцийн багтаамжийг байнга сунгахын тулд 100% хүртэл хэмжээг тохируулна.
body {
background: url (bgimage.jpg) no-repeat;
суурь хэмжээ: 100%;
}
Caniuse.com сайтын дагуу IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, бүх гол хөтчийн үйлчилгээнд ажилладаг. Энэ нь таныг өнөө үеийн бүх орчин үеийн хөтөчүүдэд зориулж хамгаалдаг бөгөөд энэ нь хэн нэгний дэлгэц дээр ажиллахгүй гэсэн айдасгүйгээр энэ эд хөрөнгийг ашиглах ёстой гэсэн үг юм.
Хуучин браузер дээр тулгуурласан суурь зургийг хуулж ав
IE9-ээс өмнө ямар ч хөтөчийг дэмжих шаардлагагүй юм, гэвч IE8 энэ өмчийг дэмждэггүй гэж бодъё. Энэ тохиолдолд та сунгасан дэвсгэрээ хугалж болно. Мөн та Firefox 3.6 (-moz-background-size) болон Opera 10.0 (-o-background-size) хөтчийн угтваруудыг ашиглаж болно.
Өргөтгөсөн арын зургийг хуурамчаар зурах хамгийн хялбар арга бол бүхэл бүтэн хуудсыг сунгана. Дараа нь та илүү зай талбайд зогсохгүй эсвэл таны текстийг сунгасан талбайд тохирсон гэдэгт санаа зовох хэрэггүй. Үүнийг хэрхэн хийхийг доор харуулав.
id = "bg" />
- Нэгдүгээрт, бүх хөтөч нь HTML BODY элементүүд дээр 100% өндөр, 0 зах болон 0 padding байгаа эсэхийг шалгаарай. Таны HTML документын толгойг дараах байдлаар байршуулна уу:
- Вэб хуудасны эхний элементийн суурь болох суурь зургийг нэмж, "bg" id-г өгнө үү:
- Дээд талын зүүн талд байрлах суурь зургийг байршуулах ба 100% -ийн өргөн, 100% өндөр байхаар байрлуулна. Үүнийг өөрийн загварын хуудсанд нэмнэ үү:
img # bg {
албан тушаал: тогтмол;
дээд: 0;
зүүн: 0;
өргөн: 100%;
өндөр: 100%;
} - "Контент" -ын id -тэй DIV элементийн дотор байгаа бүх агуулгыг нэмж оруулаарай. Доорх зургийг DIV-ээр нэмнэ үү:
Анхаар: таны хуудсыг одоо үзэх сонирхолтой байгаа. Зураг нь сунгасан харагдах болно, гэхдээ таны агуулга алга болсон байна. Яагаад? Учир нь дэвсгэр зураг нь 100% өндөр, агуулгын хуваагдал нь баримтын урсгалд дүрсний дараа байдаг - ихэнх хөтөч үүнийг харуулахгүй.Энд таны бүх агуулгууд - толгой, догол мөр, гэх мэт.
- Өөрийн контентыг байршуулахын тулд энэ нь харьцангуй бөгөөд 1-ээс z-индекстэй байна. Энэ нь стандарт дүрсэлсэн хөтөч дээр арын дүрснээс дээш гаргах болно. Үүнийг өөрийн загварын хуудсанд нэмнэ үү:
# content {
албан тушаал: харьцангуй;
z-индекс: 1;
}
- Гэхдээ чи хийгээгүй. Internet Explorer 6 стандартыг дагаж мөрддөггүй бөгөөд зарим асуудлууд байсаар байна. Хөтөч бүр CSS-ээс IE6-г нуух олон аргууд байдаг, гэхдээ хамгийн амархан (мөн бусад асуудлуудыг үүсгэхгүй байх хамгийн бага магадлалтай) нь нөхцөлт тайлбаруудыг ашиглах явдал юм. Документын толгой дээрх өөрийн загвар маягтыг дараах байдлаар тавина уу:
- Сонирхолтой тайлбарт IE 6-г тоглуулахын тулд өөр нэг загварыг нэмж үзээрэй:
- IE 7, IE 8 дээр тест хийх хэрэгтэй. Та тэдгээрийг дэмжихийн тулд саналаа өөрчлөх шаардлагатай байж магадгүй юм. Гэсэн хэдий ч үүнийг туршиж үзэхэд энэ нь ажилласан.
OK - энэ нь хүлээн зөвшөөрөгдсөн замаас хэтэрсэн байна. Цөөн хэдэн сайтууд IE 7 эсвэл 8-г дэмждэг байх ёстой, IE6-ээс бага!
Тиймээс энэ хандлага нь таныг урьтал болгодог бөгөөд магадгүй танд шаардлагагүй юм. Бүх браузеруудаа маш сайн тоглохын өмнө хичнээн хэцүү байсан талаар би сониуч зангийн загвар дээр үлдээсэн!
Жижигхэн орон зайд суурьшсан зургийг зурж авах
Та ижил төстэй арга техникийг DIV эсвэл өөр өөр вэбсайт дахь өөр элемент дээр хуурамчаар сунгасан арын зургийг ашиглаж болно. Энэ нь танд абсолют байрлалыг ашиглах эсвэл хуудасны бусад хэсгүүдэд хачирхалтай зайг ашиглах хэрэгтэй тул энэ нь арай тэвчих болно.
- Миний ашиглахыг хүссэн хуудсан дээрх зургийг арын дэвсгэр дээр байрлуул.
- Загварын хуудсан дээр зурагны өргөн болон өндөрийг тавь. Тайлбар, та өргөн эсвэл өндөрт зориулсан хувийг ашиглаж болно, гэхдээ өндөрт урттай утгыг тохируулахад хялбар байдаг.
img # bg {
өргөн: 20em;
өндөр: 30em;
} - Дээрх шигээ бидний контентыг id "контент" -аар оруулаарай:
Таны бүх агуулга энд байна
- Агуулгын Див нь арын дүрсний адил өргөн, өндөр байх ёстой.
div # content {
өргөн: 20em;
өндөр: 30em;
} - Дараа нь контентыг дүрснийхтэй ижил өндрөөр байршуулна. Тэгэхээр хэрэв таны зураг 30em байвал дээд хэв маягтай байх болно: -30em; Агуулгын 1-ээс z-индексийг тавихаа бүү мартаарай.
# content {
албан тушаал: харьцангуй;
дээд талд: -30em;
z-индекс: 1;
өргөн: 20em;
өндөр: 30em;
} - Дараа нь IE 6-ийн z-индексийг 1-ээр нэмээрэй.
Дахин хэлэхэд өргөн хүрээтэй браузерийн дэмжлэгтэйгээр суурь хэмжээ нь өнөө үед хийгддэг бөгөөд энэ арга нь өнөө үеийнхтэй адил хэрэггүй байж магадгүй юм. Хэрэв та энэ аргыг ашиглахыг хүсч байсан бол үүнийг аль болох олон хөтөч дээр туршиж үзээрэй.
Хэрэв таны агуулга өөрчлөгдсөн бол та чингэлгийн хэмжээ болон дэвсгэр зурагны хэмжээг өөрчлөх шаардлагатай болно. Тэгэхгүй бол хачин үр дүн гарах болно.