Разное

Задний фон в html: Как сделать фон в html: порядок действий

22.08.2023

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 (нетекстовый контент)

Описание

Целью этого метода является создание механизма добавления декоративные изображения и изображения, используемые для визуального форматирования веб-контента без необходимости дополнительной разметки содержимого. Это делает это Вспомогательные технологии могут игнорировать нетекстовый контент. Некоторый пользовательские агенты могут игнорировать или отключать 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; }
  
 


<тело>
  <дел>
    <дел>
      <цитата>
        
Привет, Джон! Мне очень нравится эта техника, и я собираюсь использовать ее на своем веб-сайте!

      
      <дел>
         com/">анонимный трус из Эльбонии