Веб-бетті қиыстыру үшін фондық суретті қалай созуға болады

Веб-сайтыңызға фондық графикамен визуалды қызығушылық беріңіз

Суреттер тартымды веб-сайттың дизайндарының маңызды бөлігі болып табылады. Бұл фон суреттерін пайдалануды қамтиды. Мазмұн беттерінің бөлігі ретінде ұсынылатын суреттерге қарағанда бет мазмұнын пайдаланатын суреттер мен графиктер. Бұл фондық суреттер бетке көрнекі қызығушылықты қоса алады және сіз бетте іздеуге болатын визуалды дизайнға қол жеткізуге көмектеседі.

Егер сіз фондық суреттермен жұмыс істей бастасаңыз, онда сіз суретті бетке сәйкес келу үшін созылатын сценарийге кіресіз.

Бұл, әсіресе , көптеген құрылғылар мен экран өлшемдеріне жеткізілетін жауап беретін веб-сайттар үшін жарамды.

Фондық суретті созуға деген ниет веб-дизайнерлер үшін өте таралған ниет болып табылады, себебі әрбір сурет веб-сайттың кеңістігіне сай емес. Бекітілген өлшемді орнатудың орнына, кескінді созу браузер терезесінің қаншалықты кең немесе тар болғанына қарамастан, бетке сәйкес келуіне мүмкіндік береді.

Беттің фонына сəйкестендіру үшін кескінді созудың ең жақсы жолы - артқы фон өлшемі үшін CSS3 сипатын пайдалану. Міне, беттің денесі үшін фондық суретті пайдаланатын және ол әрқашан экранға сәйкес келетін етіп 100% өлшемін орнататын мысал.

дене {
background: url (bgimage.jpg) қайталаусыз;
фон-өлшемі: 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» />

1. Алдымен барлық браузерлерде 100% биіктікке, 0 шеттерге және HTML BODY элементтерінде 0 толтыру бар екеніне көз жеткізіңіз. Төмендегілерді сіздің HTML құжатыңыздың басына орналастырыңыз:

2. Веб-беттің бірінші элементі ретінде өң болғыңыз келетін суретті қосыңыз және «bg» идентификаторын беріңіз:

3. Фондық суретті жоғарғы және сол жақта бекітілген етіп 100% кең және 100% биіктікте орналастырыңыз. Мұны сіздің стиліңізге қосыңыз:

   img # bg {
   позиция: тіркелген;
   жоғарғы: 0;
   сол: 0;
   ені: 100%;
   биіктігі: 100%;
   }

4. Барлық мазмұнды «мазмұн» идентификаторымен бірге DIV элементінің ішіндегі бетке қосыңыз. Суреттің төменгі бөлігін қосу:

   Барлық мазмұныңыз осында - тақырыптар, параграфтар және т.б.

   Ескерту: қазір сіздің бетіңізді қызықтырады. Кескін созылып көрсетілуі керек, бірақ сіздің мазмұныңыз толығымен жоқ. Неліктен? Өңдік сурет биіктікте 100% болғандықтан және мазмұн бөлімі құжаттың ағымындағы кескіннен кейін - көптеген браузерлер оны көрсетпейді.
   
5. Мазмұныңыз салыстырмалы түрде орналасуы және z-индексі 1 орналасуы үшін орнатыңыз. Бұл стандартты үйлесімді браузерлерде фондық бейнеден жоғары болады. Мұны сіздің стиліңізге қосыңыз:

   #мазмұны {
   лауазымы: салыстырмалы;
   z-индексі: 1;
   }

1. Бірақ сіз жасаған жоқсыз. Internet Explorer 6 стандарттары стандарттарға сай емес және кейбір проблемалар әлі де бар. Әр браузерден, бірақ IE6-дан CSS-ті жасырудың көптеген жолдары бар, бірақ ең қарапайым (және басқа да мәселелерді тудыруы ықтимал) шартты түсініктемелерді пайдалану болып табылады. Құжатыңыздың басына стиль кестесін енгізгеннен кейін келесіні орындаңыз:

2. Бөлектелген түсініктемеде IE 6-ні жақсы ойнау үшін басқа мәнерлермен басқа стиль кестесін қосыңыз:

3. IE 7 және IE 8-де тестілеуді ұмытпаңыз. Сізге қолдау көрсету үшін ескертулерді реттеу қажет болуы мүмкін. Алайда, мен оны сынаған кезде жұмыс істеді.

Жақсы - бұл, сөзсіз, WAY артық емес. Өте аздаған сайттар IE 7 немесе 8-ні қолдауға мұқтаж, көп дегенде IE6!

Осылайша, бұл тәсіл ескірген және, мүмкін, сіз үшін қажет емес. Мен мұнда барлық қызығушылығын модель ретінде қалдырып, барлық браузерлеріміз бір-бірімен жақсы ойнайтыны соншалықты қиын болды!

Кішірек кеңістікте созылған фон суреті түсірілуде

Веб-беттегі DIV немесе басқа элемент арқылы созылған өңдік кескінді жасыру үшін ұқсас техниканы пайдалануға болады. Бұл абсолютті позициялауды қолдануға немесе беттің басқа бөліктеріне арналған елсіз кеңістіктегі проблемаларға ие болуыңыз қажет болғандықтан, сәл теріс.

1. Суретті фон ретінде пайдаланғым келетін бетте орналастырыңыз.

2. Мәнер парағында сурет үшін ені мен биіктігін орнатыңыз. Ені немесе биіктігі үшін пайыздарды қолдануға болады, бірақ биіктіктегі ұзындық мәндерімен реттеу оңайырақ екенін көремін.

   img # bg {
   ені: 20м;
   биіктігі: 30м;
   }

3. Жоғарыда көрсетілгендей, мазмұнды «мазмұн» idімен бірге орналастырыңыз:

   Барлық мазмұныңыз осында

4. Мазмұнның бөлігін фондық сурет ретінде бірдей ені мен биіктігін көрсетіңіз:

   div # content {
   ені: 20м;
   биіктігі: 30м;
   }

5. Содан кейін мазмұнды суретке ұқсас биіктікке дейін орналастырыңыз. Егер сіздің суретіңіз 30м болса, сізде жоғарғы стиль болады: -30м; Мазмұндағы z-индексін 1 ұмытпаңыз.

   #мазмұны {
   лауазымы: салыстырмалы;
   жоғарғы жағы: -30м;
   z-индексі: 1;
   ені: 20м;
   биіктігі: 30м;
   }

6. Содан кейін IE 6 пайдаланушылары үшін z-индексіне -1 қосыңыз, жоғарыда көрсетілгендей:

Тағы да, браузердің браузерлерді қолдайтынына қарамастан, бұл тәсіл қазір қажет емес және өткен дәуірдің өнімі ретінде ұсынылады. Егер сіз осы тәсілді қолданғыңыз келсе, оны мүмкіндігінше көп браузерлерде сынап көріңіз.

Егер мазмұныңыз өлшемді өзгертсе, контейнеріңіздің және өңдік кескіннің өлшемін өзгертуіңіз керек, әйтпесе сіз елдегі нәтижелермен аяқталады.