Задний фон сайта html: Как добавить фоновый рисунок на веб-страницу?

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/">анонимный трус из Эльбонии
<дел> …

Ресурсы

Ресурсы предназначены только для информационных целей, одобрение не подразумевается.

Тесты

Процедура

  1. Проверка на наличие декоративных изображений

  2. Проверка того, что они включены в CSS

Ожидаемые результаты

Если этого метода достаточно для критерия успеха, неудача этой процедуры тестирования не обязательно означает, что критерий успеха не был удовлетворен каким-либо другим способом, а только что этот метод не был успешно реализован и не может использоваться для утверждения соответствия.

Макеты, цвета, темы и шрифты – Помощь – Joy

Мы разработали Joy, чтобы вы могли сделать свой веб-сайт уникальным. Независимо от того, используете ли вы Joy для планирования свадьбы или другого мероприятия, мы предлагаем множество инструментов для дизайна, которые помогут вам создать сайт, который понравится вам и вашим гостям. От смешивания и сопоставления макетов и графических тем до настройки шрифтов и цветов до тех пор, пока они не станут идеальными, у вас есть бесконечные возможности играть в дизайнера веб-сайтов — без каких-либо сложностей или суеты. Вот семь простых шагов, чтобы создать веб-сайт вашей мечты!

1

. Перейдите на страницу дизайна

Чтобы начать экспериментировать с дизайном вашего веб-сайта, нажмите  Дизайн на панели администратора.

2. Отредактируйте свой макет, цвета и оформление

На странице «Дизайн» вы сможете отредактировать макет своего веб-сайта, акцентный цвет и оформление (помимо других параметров, которые мы рассмотрим ниже), и это функциональные возможности. вы можете удобно найти в левой части страницы.

Начнем с вашего макета:

У вас есть два макета на выбор: одностраничный макет и многостраничный макет, между которыми вы можете переключаться в любой момент в процессе проектирования.

Одностраничный макет  позволяет демонстрировать свои фотографии и детали в горизонтальном современном дизайне с помощью прокрутки по подсказкам для уникального и увлекательного опыта.

В то же время многостраничный макет  предлагает более вертикальный, классический вид с вашей информацией в обычном виде на главной странице. Одна из лучших особенностей использования многостраничного макета — это возможность настраивать графические акценты и фон в выбранной вами теме, чтобы полностью соответствовать вашему дизайну. Чтобы найти доступные графические акценты, выберите многостраничный макет, прокрутите изображение, которое хотите использовать, и найдите стрелку раскрывающегося списка. Когда вы нажмете на стрелку раскрывающегося списка, вы увидите в своем распоряжении десятки прекрасных графических акцентов. Графика будет отображаться под вашей фотографией на каждой странице вашего сайта.

Если вы решите использовать многостраничный макет, вы сможете выбрать «Прозрачность» для некоторых дизайнов, щелкнув стрелку справа от макета. Поэкспериментируйте с этим эффектом, чтобы увидеть, дает ли он желаемый вид!

Давайте перейдем к вашему цвету :

Раздел Accent   Colors  , расположенный в разделе «Макет», дает вам возможность выбрать цвет для вашего сайта и приложения. При нажатии на Акцент Цвет , вы можете определить цвет ссылки и контраст текста с фоном (светлый или темный).

В одностраничном макете вы увидите возможность использовать свой Акцентный цвет в качестве  художественного фона . В многостраничном макете , а не есть возможность использовать цвет ссылки в качестве фона.

И последнее, но не менее важное: ваша тема:

Если вы прокрутите вниз, в разделе  Искусство  , расположенном в разделе Акцентные цвета, вы увидите сотни тем — от приглушенных и современных до ярких и цветочных — на выбор для дизайна вашего сайта. Поиграйте, чтобы найти тему, которая будет отлично смотреться с вашими фотографиями! Вы даже можете отфильтровать темы по описанию, если вы имеете в виду определенный стиль.

Примечание. Некоторые темы могут быть недоступны для многостраничного макета.

Вы бы предпочли  , а не  , иметь тему на своем сайте? Вы можете выбрать более минималистский вид, используя как одностраничный, так и многостраничный макет. Выбрав опцию  Blank  в разделе  Art , вы увидите, что любая тема, которую вы могли выбрать ранее, теперь исчезла и заменена белым фоном.

Если выбрать пустую тему для одностраничного макета вы можете использовать другой цвет фона . Вы можете установить этот цвет, перейдя в раздел «Акцентные цвета» и выбрав «Использовать в качестве художественного фона».

3. Редактирование и фильтрация шрифтов

Шрифт вашего веб-сайта также важен для получения желаемого внешнего вида. Измените шрифт, перейдя к Шрифты  в верхней части страницы дизайна веб-сайта (перечислены рядом с темами). Затем поэкспериментируйте с десятками шрифтов в режиме реального времени, чтобы найти идеальное сочетание.

Как и в случае с темами, вы также можете фильтровать по имени шрифта, если вы уже имеете в виду стиль шрифта.

4. Применение CSS

CSS (также известные как каскадные таблицы стилей) описывает, как элементы HTML, такие как макет, цвета и шрифты, отображаются на экране. Это может быть полезно, если вы хотите, чтобы определенный элемент отображался определенным образом (в противном случае это невозможно в его текущей форме).

Функция CSS доступна только при использовании одностраничного макета. Выбрав одностраничный макет, перейдите к CSS  в верхней части страницы оформления веб-сайта рядом со шрифтами. Затем введите свой пользовательский код CSS в поле ниже.

ПРИМЕЧАНИЕ: У нас есть функция CSS для тех, кто знает CSS и хочет изменить стиль своих сайтов. Однако в настоящее время мы не предлагаем полную поддержку CSS. Вы можете поиграть, но у нас просто нет ресурсов, чтобы ответить на вопросы, связанные с CSS. Кроме того, если вы добавите переопределения CSS, возможно, будущие обновления Joy повлияют на внесенные вами изменения.

5. Просмотр вашего веб-сайта в режиме настольного компьютера и мобильного устройства

При редактировании веб-сайта вы сможете переключаться с рабочего стола на мобильный вид одним нажатием кнопки. На странице редактора веб-сайта в верхней части предварительного просмотра вы увидите значок рабочего стола и значок мобильного телефона.

Лучше время от времени переключаться между двумя экранами, даже если вы не планируете использовать Joy на своем мобильном телефоне — ваши гости все равно могут посещать сайт со своего мобильного!

Вы заинтересованы в изучении печатных канцелярских принадлежностей для вашего мероприятия? Обратите внимание, что не во всех темах Joy есть канцелярские принадлежности. Пока вы экспериментируете с темами и находите те, которые лучше всего соответствуют вашему стилю, перейдите вправо от страницы редактора веб-сайта, где вы увидите значок принтера.

Если в вашей теме , а не есть подходящие канцелярские принадлежности, появится сообщение «В этой теме нет подходящих канцелярских принадлежностей». Также будут ссылки на Paperlust и Paper Culture, партнеров Joy по печати, где вы все еще можете найти похожий, дополняющий дизайн к выбранной вами теме и заказать печать (даже на международном уровне).

Если в вашей теме  есть соответствующие канцелярские товары , появится сообщение «Доступные канцелярские товары для [название темы]» вместе с примерами доступных канцелярских принадлежностей и ссылкой «Настроить и купить» непосредственно у партнера по печати, который разработал тема.

Пока вы экспериментируете со своим дизайном, изменения, внесенные вами в макет, цвет, тему и шрифт, будут автоматически сохранены.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *