Додайте кольорове або фонове зображення на веб-сайт CSS
7 грудня 2013 року
Ви можете налаштувати фон свого веб-сайту одним із таких способів:
- Застосуйте рівномірний або градієнтний колірний ефект до фону веб-сайту
- Додайте шпалери на веб-сторінку
- Додайте до області однорідний колір, кольоровий градієнт, зображення або межу
Код CSS для кольору: body
Перший, визначивши колір тла, а другий, завантаживши зображення на фон сторінки. Завантаження зображення внизу сторінки не повинно вас обдурити. Нічого не вдасться досягти, завантаживши величезне зображення, яким би великим ви не були впевнені, що у відвідувача немає монітора з діагоналлю більшою за цю, тому розмір монітора значно перевищує розмір зображення. В основному фонове зображення - це невелике зображення, яке браузер буде знати, як повторити.
CSS-код для додавання фонового зображення: body
- background: Встановлює всі властивості фону у виписці
- background-color: Встановлює колір фону для елемента CSS
- background-image Встановлює фонове зображення для елемента CSS
- background-position Встановлює початкове положення шпалери
- background-repeat Встановлює спосіб повторення шпалер
1. Фон із квадратних зображень.
Саме тут виникає перша проблема. Як їх буде повторювати браузер? Припускаємо існування квадратного зображення зі стороною 2 см. Малюнок у квадраті повинен бути виконаний таким чином, щоб при з’єднанні двох квадратів як по вертикалі, так і по горизонталі зображення ідеально поєднувалися, не створюючи враження сусідніх частин, а складаючи ціле.
2. Фон із стрічкових зображень
Друга проблема виникає із фоновими зображеннями, визначеними як прямокутники, з якими ви хотіли б мати загальну ширину сторінки, вони повторюються лише вертикально. Проблем, породжених цими фоновими стрічками, не тільки важче уникнути, але й частіше зустрічаються. Наскільки широкою має бути стрічка? Наскільки велике вікно браузера відвідувача. Якщо вікно браузера ширше фонової смуги, воно буде повторюватися не тільки вертикально, але і горизонтально, що створить враження незавершеної речі, непотрібно витягнутої з правого боку.
3. Кореляція фону переднього плану.
Ще однією проблемою, і це дуже часто, є співвідношення між фоном та характеристиками тексту та графіки, що відображаються над ним. Перевантажений фон ускладнить читання тексту, шрифт певного кольору унеможливить читання тексту певними кольорами.
4. Співвідношення між фоном та повідомленням сторінки
У зв'язку з тим, що певні фони представляють зображення самі по собі, це передбачає певний матеріал або ідею, Невідповідність фону до ідеї сторінки - вони повинні бути тісно пов'язані з ідеєю сторінки, часто навіть дратує.
2WebDesign
Маючи понад десятирічний досвід у веб-дизайні та керуючись безмежною пристрастю до Інтернету, ми запрошуємо вас відвідати наш сайт та надихнутися читанням найцікавіших статей у цій галузі.