Bir veb-səhifə sığdırmaq üçün bir fon şəklini necə uzatmaq olar?

Arxa qrafika ilə veb-saytınıza vizual maraq verin

Şəkillər cəlbedici veb dizaynların əhəmiyyətli bir hissəsidir. Bu, fon şəkillərindən istifadə etməyi nəzərdə tutur. Bunlar, məzmun səhifələrinin bir hissəsi kimi təqdim olunan şəkillərdən fərqli olaraq bir səhifə sahələrinin arxasında istifadə olunan şəkillər və qrafiklərdir. Bu arxa plan şəkilləri bir səhifəyə vizual maraq əlavə edə bilər və bir səhifədə aradığınız vizual dizaynı əldə etməyə kömək edə bilər.

Arxa fon şəkilləri ilə işə başlasanız, şübhəsiz ki, bir görüntünün səhifəyə uyğunlaşmaq üçün uzanmasını istədiyiniz ssenariyə keçəcəksiniz.

Bu xüsusilə cihazların və ekran ölçülərinin genişliyinə çatdırılan cavab verən saytlar üçün doğrudur.

Bir fon imicini uzatmaq arzusu veb-dizaynerlər üçün çox istəkli bir arzudır, çünki hər bir şəkil bir veb saytına uyğun deyil. Müəyyən bir ölçüsü təyin etmək yerinə, şəkil uzanır , brauzer pəncərəsinin nə qədər geniş və ya dar olmasına baxmayaraq, səhifəyə uyğunlaşmağa imkan verir.

Bir səhifənin arka planına uyğun bir görünüşü uzatmanın ən yaxşı yolu, fon ölçüsü üçün CSS3 xüsusiyyətindən istifadə etməkdir. Burada bir səhifə bədən üçün fon təsvirini istifadə edən və 100% ölçüsünü təyin edən bir nümunədir ki, həmişə ekrana uyğunlaşacaqdır.

bədən {
background: url (bgimage.jpg) heç bir təkrar;
fon ölçüsü: 100%;
}

Caniuse.com-a istinadən bildirir ki, bu əmlak IE 9 +, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ və bütün əsas mobil brauzerlərdə işləyir. Bu, bu gün mövcud olan bütün müasir brauzerlər üçün əhatə edir, yəni birinin ekranında işləməyəcəyindən qorxmadan bu əmlakı istifadə etməlisiniz.

Köhnə brauzerlərdə uzanmış bir fonun yandırılması

IE9-dən daha böyük olan hər hansı brauzerləri dəstəkləmək lazımdır ki, çox çətin deyil, ancaq IE8-nin bu əmlakı dəstəkləməyindən narahat olduğunuzu düşünək. Bu halda, uzanmış bir fon saxta saxlaya bilərsiniz. Firefox 3.6 (-moz-fon-ölçüsü) və Opera 10.0 (-o-background-size) üçün brauzer prefikslərini istifadə edə bilərsiniz.

Gərginləşdirilmiş arxa planda saxta saxta yol bütün səhifəni uzatmaqdır. Sonra əlavə məkanla bitmirsiniz və ya mətnin uzanan sahəyə uyğun olduğunu narahat etmirsiniz. Bunu necə etmək olar:

id = "bg" />

1. Birincisi, bütün brauzerlərin 100% hündürlüyə, 0 marjina və HTML BODY elementlərinə 0 dolu olduğuna əmin olun. HTML sənədinizin başlığına aşağıdakıları yerləşdirin:

2. Veb səhifənin ilk elementi olaraq arka plan olmaq istədiyiniz şəkil əlavə edin və "bg" in idini verin:

3. Arka planın yuxarı və sol hissəsində yerləşdiyi və 100% genişlikdə və 100% hündürlüyündə yerləşdirilməsi. Bunu üslub hesabınıza əlavə edin:

   img # bg {
   mövqe: sabit;
   üst: 0;
   sol: 0;
   genişlik: 100%;
   boy: 100%;
   }

4. Bütün məzmununuzu "məzmun" id ilə bir DIV elementinin içərisinə əlavə edin. Görünüşün altındakı DIV əlavə edin:

   Buradakı bütün kontentlər - başlıqlar, paraqraflar və s.

   Qeyd: indi səhifənizə baxmaq maraqlıdır. Görünüş uzanmış görünməlidir, ancaq məzmun tamamilə itkindir. Niyə? Arxa planın hündürlüyü 100% olduğu üçün məzmunun bölünməsi sənədin axınında göründükdən sonra - ən çox brauzerlər onu göstərməyəcək.
   
5. Məzmununuzu nisbi və z-indeksi 1-ə qədər yerləşdirin. Bu standartları uyğun olan brauzerlərdə arxa planın üstündən gətirəcəkdir. Bunu üslub hesabınıza əlavə edin:

   #content {
   mövqe: nisbi;
   z-indeksi: 1;
   }

1. Amma sən bunu görmürsən. Internet Explorer 6 standartlara uyğun deyil və hələ də bəzi problemlər var. CSS'yi hər brauzerdən, lakin IE6'dan gizləmək üçün bir çox yol var, lakin ən asan (və digər problemlərə səbəb olma ehtimalları) şərti şərhlərdən istifadə etməkdir. Sənədinizin başında üslubdan sonra aşağıdakıları qoyun:

2. Vurgulanan şərhin içərisində, IE 6-ı gözəl oynamağa nail olmaq üçün bəzi üslublarla başqa bir stil əlavə edin:

3. IE 7 və IE 8-də də test etdiyinizə əmin olun. Onlara da dəstək olmaq üçün şərhləri düzəltməlisiniz. Ancaq bunu sınadığım zaman çalışdı.

OK - bu, əlbəttə, WAY overkill edir. Çox az sayda sayt artıq IE 7 və ya 8-i dəstəkləməlidir, daha az IE6!

Beləliklə, bu yanaşma qədim və ehtimal ki, sizin üçün lazımsızdır. Buradakı bütün brauzerlərimizin bir-birinə bənzərsiz oynadığı qədər daha çətin şeylər olduğu üçün bura daha çox maraq modeli olaraq buraxın!

Kiçik bir məkandan daha uzanan bir Arka Plan Təsvirini Fake

Veb-səhifənizdə bir DIV və ya digər element arasında uzanan bir arxa pəncərəni saxtalaşdırmaq üçün bənzər bir texnikadan istifadə edə bilərsiniz. Bu, mütləq yerləşdirməni istifadə etmək və ya səhifənizin digər hissələri üçün qəribə boşluq məsələlərinə malik olduğunuz üçün bir az tövsiyə olunur.

1. Görünüşü fon kimi istifadə etmək istədiyiniz səhifəyə yerləşdirin.

2. Stil hesabatında, şəkil üçün genişlik və boyu təyin edin. Qeyd edək ki, genişlik və ya hündürlük üçün faizlərdən istifadə edə bilərsiniz, amma hündürlüyün uzunluğu ilə uyğunlaşmaq daha asandır.

   img # bg {
   genişlik: 20em;
   yüksəklik: 30em;
   }

3. Yuxarıda etdiyimiz kimi id content "content" ilə bir div ildə yerləşdirin:

   Bütün məzmununuz burada

4. Divanın tərkib hissəsi div kimi eyni genişlik və boy olmaq üçün:

   div # content {
   genişlik: 20em;
   yüksəklik: 30em;
   }

5. Sonra məzmunu eyni yüksəkliklə şəkil kimi yerləşdirin. Demək olar ki, əgər sənin təsviriniz 30emsə, üstəlik bir üslub olacaq: -30em; İçindəki 1 z-indeksi qoymağı unutmayın.

   #content {
   mövqe: nisbi;
   üst: -30em;
   z-indeksi: 1;
   genişlik: 20em;
   yüksəklik: 30em;
   }

6. Daha sonra yuxarıda göstərdiyiniz kimi IE 6 istifadəçiləri üçün z-indeksi -1 əlavə edin:

Artıq ölçülü geniş brauzer dəstəyi ilə istifadə etməklə, artıq bu yanaşma çox güman ki lazımsızdır və keçmiş dövrün məhsulu kimi təqdim olunur. Bu yanaşmanı istifadə etmək istəmiş olsanız, bunu mümkün qədər çox brauzer kimi sınayın.

Əgər məzmun ölçüsünü dəyişdirsə, konteynerinizin və fon şəklinin ölçüsünü dəyişdirməlisiniz, əks halda, siz qəribə nəticələrlə sona çatacaqsınız.