Добавляем фон в HTML
admin 18.02.2016 Основы HTML Оставить комментарий 1,702 Просмотры
Фон, это та же картинка, только загнанная под текст и другие картинки. Фон нельзя выделить мышкой, в отличие от картинок, выделяемых вместе с текстом. В этом одновременно его преимущество и недостаток — в некоторых случаях. Фон простирается в пределах тега таблицы или же всей странички, если указан в теге <body>. Первое, конечно, предпочтительнее.
Прописываем фон:
<td background=»/картинка фона.gif«>
— фоном может быть любая картинка. Вот только став фоном она приобретет интересные возможности.
Например, как вы думаете сделаны дырдочки по краям этого клетчатого «листа»? Это не длинная картинка, это один небольшой квадратик с одной «дырочкой». Просто, как и всякий фон, он многократно размножается по всей площади наделенного фоном тега. Так же сделана и тень от листа — темная полоска по краю — это всего лишь состоящий из четырех-пяти точек (пикселей) микрорисуночек.
Естественно, если я бы не назначил четкую ширину полям с этим фоном, у меня бы получилось тиражирование фонового изображения не только вверх, но и в стороны:
| а поверх фона можно чего-нить написать! главное, чтобы фон это не перекрывал |
— вот он, этот самый фон. Кто особо любопытен, может попробовать сохранить его как картинку :0) Если получится. Конечно, придется покопаться в коде — если у вас Ехплорер :0) Ну а счастливым владельцам Мозиллы, конечно, достаточно глянуть «состав HTML», чтобы увидеть всю задействованную в нем графику с соответствующими линками.
Хотя, конечно, и без него можно обойтись. Модно просто назначить таблице какой-либо однотонный цвет и довольствоваться этим. Фоном не стоит злоупотреблять — оптимально, чтобы вся графика на странице, все украшательства не весили больше 30 кб. И то это много… У меня, например, все эти бирюльки-дырочки, клетчатый фон и прочее весит чуток более 8 кб. Лишняя секунда загрузки практически не заметна, а глаз не «тонет» в пустоте белого, серого или черного фона. Фон, как и картинки, можно сделать анимированным, например, флэшем, но для начала лучше .gif`ом, поскольку он наиболее прост и легок в изготовлении.
Да, если вы столкнетесь с неумелым использованием фона и текст, на нем расположенный, будет трудночитаем, советую его просто выделить мышкой и читать в темном выделении — увы, только так можно спасти свои глаза от надругательства многими современными «вебмастерами».
Совет — фон старайтесь ориентировать либо вертикально, либо горизонтально. Это упростит растягивание в ту или иную сторону, чтобы дизайн наш при стискивании или растягивании окошка не «плыл».
Конечно, кроме перечисленных свойств, у фоновых изображений огромное количество возможностей, но подробности — в разделе стили
Если Вам понравилась статья, пожалуйста, поставьте лайк! Следите за новой информацией на нашем канале. Подписывайтесь на нас в группе: подписаться
100+ Html изображений | Скачать бесплатные картинки на Unsplash
100+ Html картинки | Download Free Images on Unsplash- A framed photoPhotos 351
- A stack of photosCollections 4.1k
- A group of peopleUsers 23
programming
javascript
coding
source
html code
the source
random
html/css
источники
Hd обои для компьютераоборудование для мониторингакомпьютерный язык
codeberlingermany
portugalquarteiraguitar
workosijekhrvatska
Book images & photosbook coverCover photos & images
codercomputer engineerafghanistan
Hd starbucks wallpapersovertoomamsterdam
deutschlanderlangenhomepage
Hd dark wallpapersmoodydev
–––– –––– –––– – –––– – –––– –– –– –––– – – –– ––– –– –––– – –.
кодированиеHd серые обоиразвитие
Hd 3d обоирендерHd windows обои
Website backgroundsfront-endblender
Hd laptop wallpaperscomputer softwarehealthcare and medicine
csssite building
deskmachine learningoffice
internetjavascriptdesign professional
Texture backgroundsHd pattern wallpaperstx
śmiarypolandit
Related collections
HTML
18 photos · Curated by Mariana OrtegaHTML-фоны
72 фото · Куратор Na NoJuly HTML
37 photos · Curated by Tim Arnoldfooddropgroningennetherlands
collaborationteamworkmeeting
Hd computer wallpapersmonitoring equipmentcomputer language
Hd 3d wallpapersrenderHd windows wallpapers
Hd laptop wallpaperscomputer softwarehealthcare and medicine
Book images & photosbook coverCover photos & изображения
internetjavascriptdesign professional
deutschlanderlangenhomepage
—-кодингхд серые обои
——–dugefront-endblenderWorkisijechhrvatska
CoderComputer ingenerafghanistan
Фоны текстуры.
– – –––– –– – –– –––– – – –– ––– –– –––– – –.
codeberlingermany
portugalquarteiraгитара
csssite building
desktopmachine learningoffice
Связанные коллекции
HTML
18 Фотографии · Куратор Mariana OrtegaHTML Faines
72 Фотографии · Куратор NAиюля HTML
37 Фотографии · Curnold1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111119 гг.сотрудничествокомандная работавстреча
Логотип UnsplashUnsplash+
В сотрудничестве с Getty Images
Unsplash+
Разблокировать
Hd компьютерные обоиоборудование для мониторингакомпьютерный язык
Флориан Оливо
кодированиеHd серые обоиразвитие
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
Pankaj Patel
Codeberlingermany
Jackson Sophat
HD 3D Wallpapersrenderhd Windows Обои
Jackson Sophat
Portugalquartquartar
Nathan Da Silva
Portugalquartar-nenbartarder
Nathan Da Silva
.
0011 Unsplash logo
Unsplash+
In collaboration with Getty Images
Unsplash+
Unlock
Hd laptop wallpaperscomputer softwarehealthcare and medicine
Goran Ivos
workosijekhrvatska
Valery Sysoev
csssite building
Greg Rakozy
Book images & photosbook coverФото и изображения на обложке
KOBU Agency
deskmachine learningoffice
Mohammad Rahmani
codercomputer engineerafghanistan
Unsplash logoUnsplash+
In collaboration with Getty Images
Unsplash+
Unlock
internetjavascriptdesign professional
Niels Kehl
Hd starbucks wallpapersovertoomamsterdam
Michael Dziedzic
Texture backgroundsHd pattern wallpaperstx
Markus Spiske
deutschlanderlangenhomepage
Nick Karvounis
śmiarypolandit
Jantine Doornbos
fooddropgroningennetherlands
Unsplash logoUnsplash+
In collaboration with Getty Images
Unsplash+
Unlock
collaborationteamworkmeeting
Kevin Canlas
Hd dark wallpapersmoodydev
Логотип Unsplash
Сделайте что-нибудь потрясающее
C9: Использование CSS для включения декоративных изображений
C9: Использование CSS для включения декоративных изображений | Методы для WCAG 2.
0Методы для WCAG 2.0
Перейти к содержимому (нажмите Enter)
- Содержание
- Введение
- 9
4 9 Техника C8
- Следующая: Метод C12
На этой странице:
- Важная информация о методах
- Применимость
- Описание
- Примеры
- Ресурсы
- Связанные методы
- Тесты
—
Важная информация о методах
Важную информацию об использовании этих информативных методов и о том, как они соотносятся с нормативными критериями успеха WCAG 2.0, см. в разделе «Понимание методов для критериев успеха WCAG». В разделе «Применимость» объясняется область применения метода, и наличие методов для конкретной технологии не означает, что эту технологию можно использовать во всех ситуациях для создания контента, соответствующего WCAG 2.
0.
Применимость
Любая технология, которая может использовать CSS для включения изображений.
Данная техника относится к:
- Критерий успеха 1.1.1 (нетекстовое содержимое)
- Как встретить 1.1.1 (нетекстовый контент)
- Понимание критерия успеха 1.1.1 (нетекстовый контент)
Описание
Целью этого метода является создание механизма добавления
декоративные изображения и изображения, используемые для визуального форматирования веб-контента
без необходимости дополнительной разметки содержимого. Это делает это
Вспомогательные технологии могут игнорировать нетекстовый контент. Немного
пользовательские агенты могут игнорировать или отключать CSS по запросу пользователя, так что
фоновые изображения, включенные в CSS, просто «исчезают» и не мешают
с такими параметрами отображения, как увеличенный шрифт или высокая контрастность.
Фоновые изображения могут быть включены со следующими свойствами CSS:
Примечание. Этот метод не подходит для любого изображения, которое передает информацию или обеспечивает функциональность, или для любого изображения, в первую очередь предназначенного создать определенный сенсорный опыт.
Примеры
Пример 1. Фоновое изображение для HTML-страницы
Таблица стилей для веб-страницы определяет фоновое изображение для целая страница.
Пример кода:
…
<тип стиля="текст/CSS">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
<тело>
...
Пример 2. Фоновое изображение с CSS для ролловеров изображений
Таблица стилей для веб-страницы использует фон CSS свойство для создания декоративных эффектов ролловера, когда пользователь наводит курсор
указатель мыши над ссылкой.
Пример кода:
a:hover { background: #ffe url('/images/hover.gif') repeat; цвет: #000;
текстовое оформление: нет;
} Пример 3. Фоновые изображения с помощью CSS для создания закругленных углов вкладки или другие элементы
Набор стилей для веб-страницы использует фон CSS свойство для создания закругленных углов на элементах.
Пример кода:
… <тип стиля="текст/CSS"> div#Комментарии { ширина:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
поле: 0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
маржа: 0; отступ: 8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
маржа: 0; заполнение сверху: 30px; } <тело> <дел> <дел> <цитата>Привет, Джон! Мне очень нравится эта техника, и я собираюсь использовать ее на своем веб-сайте!
<дел> 