Ноу Інти, лекція, фонові зображення css
Наприклад, на малюнку 31.13 можна бачити, що для виведення іконки Землі через вікно HTML можна розмістити зображення за допомогою left top. Щоб змістити позицію зображення, щоб виводилася іконка тривожного сигналу, позицію фонового зображення необхідно змінити на -80px 0. Негативне горизонтальне значення зміщує вліво.
Мал. 31.13. Використання спрайтів CSS для скорочення числа запитів HTTP.
Примітка. При використанні негативних позицій фонового зображення, браузер Safari буде повторювати зображення, навіть якщо визначено no-repeat. Необхідно пам'ятати про це, якщо ви збираєтеся використовувати фонові зображення для створення більш складних компоновок.
Приклад складного спрайту і фонового зображення
Давайте подивимося, як спрайт CSS можна використовувати для створення цікавого ефекту. Припустимо, що дизайнер надіслав новий ескіз. Він призначений для списку посилань на основній сторінці блогу. Він вказує на профіль блогера LinkedIn, стрічку RSS, фотографії Flickr, і закладки. Подивившись на посилання ми зрозуміли, що є градієнт, що починається в центрі як білий колір і перетворюється в сірий вгорі і внизу посилання, і, щоб ускладнити все ще більше, дизайнер попросив, не могли б ми зробити кожну посилання чисто білій без особливостей, коли відвідувачі наводять на неї курсор миші - подивіться на малюнок 31.14.
Мал. 31.14. Новий ескіз дизайну.
Логотипи можна було б включити в розмітку за допомогою елементів img. однак використання спрайтів CSS є значно кращим способом - спрайт завантажуються швидше і потрібно завантажувати тільки одне зображення (а не чотири), і це знижує плутанину в коді HTML, зменшуючи обсяг необхідної розмітки.
створення спрайту
Перший крок полягає в розрізуванні чотирьох логотипів і створення безлічі спрайту. як показано на малюнку 31.15.
Мал. 31.15. Безліч спрайту.
Необхідно також відрізати смугу шириною 1 піксель від градієнта. Щоб було легше бачити, я відрізала кілька більш широку смугу, але потрібно тільки один піксель - див. Малюнок 31.16.
Мал. 31.16. Смуга для градієнтного фону.
Код CSS буде використовувати обидва фонових зображення. Перш за все, подивіться на зображення фонового градієнта. Потрібно відзначити три цікавих моменти:
Додайте наступний код CSS у новий файл CSS і з'єднайте його з файлом HTML:
Останній рядок означає, що елемент не повинен мати фоновий колір або зображення, коли користувач наводить на неї курсор миші, або фокус клавіатури. Можливо ви дивуєтеся, чому властивості фону застосовуються до заслання, а не до елемента списку? Відповідь полягає в тому, що Internet Explorer 6 і більш ранні версії не підтримують псевдо-класи, такі як hover. на елементах, відмінних від посилань. Я зробила відповідну зміну, щоб врахувати це обмеження.
Маючи загальний випадок, тепер можна визначити виключення, або що відрізняє кожен окремий логотип. В даному випадку в CSS змінюється тільки background-position. Кожна відповідна позиція списку повинна містити зображення зі зміщенням на 15 пікселів вліво, так як кожен логотип має в ширину 15 пікселів. Додайте наступний код внизу файлу CSS:
Цей приклад може здатися на перший погляд лякає. Зверніть увагу на фонові зображення. В цьому випадку використовувалися негативні піксельні значення, щоб змістити фонове зображення вліво, щоб була видна відповідна частина зображення. Позитивні значення зміщують фонове зображення вниз і вправо, негативні значення зміщують зображення вгору і вліво.
Експериментуйте зі значеннями позиції фонового зображення в закінченому прикладі, щоб краще зрозуміти, як налаштовувати позиції спрайтів.
висновок
Ви повинні тепер добре розуміти фонові зображення CSS. і що ще більш важливо, ви стали краще справлятися з читанням специфікацій, тому, якщо виникають сумніви щодо певного властивості, ви повинні знати, як знайти його опис. У даній лекції були розглянуті фоновий колір, зображення, повторення. приєднання. і позиціонування. Ви дізналися також, чому розробники використовують спрайт CSS. і як використовувати цю розвинену техніку.
Контрольні питання
- Параграф має розмір 40px на 180px, а фонове зображення 60px на 200px. Побачите ви все зображення або тільки його частина? Чому?
- Ви хочете, щоб зображення було позиционировано в нижньому лівому кутку елемента blockquote - впишіть, будь ласка, правильні значення.
додаткове читання
У міру того як зростала її розуміння продуктивності і великомасштабних сайтів, вона перейшла на роботу в бізнес онлайн-маркетингу, створення інфраструктурних рішень для багатьох добре відомих європейських і світових брендів, таких як SFR, Club Med, SNCF, La Poste, FNAC, Accor Hotels , і Renault.