C9: Использование CSS для включения декоративных изображений
C9: Использование CSS для включения декоративных изображений | Методы для WCAG 2.0Методы для WCAG 2.0
Перейти к содержимому (нажмите Enter)
- Содержание
- Введение 9 0012
- Предыдущий: Техника C8
- Следующая: Technique C12
На этой странице:
- Важная информация о методах
- Применимость
- Описание
- Примеры
- Ресурсы
- Связанные методы
- Тесты
—
Важная информация о методах
См. «Понимание методов для критериев успеха WCAG» для получения важной информации об использовании этих информативных методов и о том, как они относятся к нормативным критериям успеха WCAG 2.0. В разделе «Применимость» объясняется область применения метода, и наличие методов для конкретной технологии не означает, что эту технологию можно использовать во всех ситуациях для создания контента, соответствующего WCAG 2. 0.
Применимость
Любая технология, которая может использовать CSS для включения изображений.
Данная техника относится к:
- Критерий успеха 1.1.1 (нетекстовое содержимое)
- Как встретить 1.1.1 (нетекстовый контент)
- Понимание критерия успеха 1.1.1 (нетекстовый контент)
Описание
![](/800/600/https/images.squarespace-cdn.com/content/v1/5f4653a80c5b7755c0e586a9/1618327200638-4CVONTGAK7WBWIP328RT/shutterstock_640215469.jpg)
Фоновые изображения могут быть включены со следующими свойствами 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; }<тело> <дел> <дел> <цитата> Привет, Джон! Мне очень нравится эта техника, и я собираюсь использовать ее на своем веб-сайте!
<дел> com/">анонимный трус из Эльбонии