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