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

Содержание

Атрибут background | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<body background="URL">
...
</body>

Значения

Любой допустимый адрес изображения — можно использовать относительный
или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут background</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body background="images/snow.gif">
  ...
 </body>
</html>

Применение фона к и / или

http://jsfiddle.net/julien_c/GmAL4/

Я обнаружил , что если вы применяете фон CSS к body, он занимает всю страницу (независимо от того, какова фактическая высота или ширина body ).

Однако если вы применяете фон CSS как к html , так и к body, фон для body не занимает всю страницу .

Является ли это несоответствие ожидаемым поведением?

Как бы я мог наложить два полноэкранных фона (скажем, цвет фона и полупрозрачное изображение?)

html

css

Поделиться

Источник


julien_c    

08 июня 2012 в 10:58

2 ответа

  • Применение CSS к упорядоченному списку-цвет фона под номерами?

    У меня есть упорядоченный список, который я оформил двумя способами: Раскрасьте цифры по-разному в соответствии с текстом списка Применение цвета фона и границы к каждому элементу списка См. список в правой части этой страницы Числа становятся оранжевыми, сначала применяя оранжевый стиль к…

  • Стили, применяемые к элементу HTML, всегда переопределяются

    Я применяю стили к элементу <html> и к элементу <body> . Возможно ли, чтобы стили на элементе <html> применялись поверх стилей <body ? Применение CSS к <html> , похоже, не следует обычным правилам специфичности CSS. Это правда? Пример: http://jsfiddle.net/59dpy /…


59

Это правильное поведение . 1в стандартном режиме body, как и html, не сразу занимает всю высоту окна просмотра, даже если оно появляется, когда вы применяете только фон к последнему. На самом деле, элемент html возьмет на себя фон body , если вы не дадите ему свой собственный фон, и html передаст его на холст:

Фон корневого элемента становится фоном холста, и его фоновая область рисования распространяется на весь холст, хотя любые изображения имеют размер и расположены относительно корневого элемента так, как если бы они были нарисованы только для этого элемента. (Другими словами, фоновая область позиционирования определяется как для корневого элемента.) Если корень ‘цвет фона’ значение ‘прозрачный’, холст цвет фона зависит UA. Корневой элемент не окрашивает этот фон снова, т. е. используемое значение его фона прозрачно.

Для документов, корневым элементом которых является элемент HTML HTML или элемент XHTML html : если вычисленное значение ‘background-image ‘на корневом элементе равно’ none‘, а его’ background-color ‘ — ’ transparent’, агенты пользователя должны вместо этого распространять вычисленные значения свойств фона из первого дочернего элемента этого элемента HTML BODY или XHTML body . Используемые значения фоновых свойств этого элемента BODY являются их начальными значениями, А распространяемые значения обрабатываются так, как если бы они были указаны в корневом элементе. Рекомендуется, чтобы авторы документов HTML указывали фон холста для элемента BODY , а не для элемента HTML .

Тем не менее, вы можете наложить любое фоновое изображение на цвет фона на один элемент (либо html , либо body), не полагаясь на два элемента — просто используйте background-color и background-image или объедините их в свойстве background shorthand:

body {
    background: #ddd url(background.png) center top no-repeat;
}

Если вы хотите объединить два фоновых изображения, вам нужно полагаться на несколько фонов. На это есть в основном два дня:

  • В CSS2 именно здесь пригодится стилизация обоих элементов: просто установите фоновое изображение на html , а другое-на body , которое вы хотите наложить поверх первого. Чтобы обеспечить фоновое изображение на body дисплеях на полной высоте видового экрана, вам также необходимо применить height и min-height соответственно:

    html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}

    Кстати, причина, по которой вы должны указать height и min-height на html и body соответственно, заключается в том, что ни один из элементов не имеет внутренней высоты. По умолчанию оба параметра имеют значение height: auto . Именно видовой экран имеет высоту 100%, поэтому height: 100% берется из видового экрана, а затем применяется к body как минимум для прокрутки содержимого.

  • В CSS3 синтаксис был расширен, так что вы можете объявить несколько фоновых значений в одном свойстве, устраняя необходимость применять фон к нескольким элементам (или корректировать height / min-height ):

    body {
    background: url(background2.png) center top no-repeat, 
                #ddd url(background1.png) repeat;
}

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

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

Однако если вам нужно поддерживать старые браузеры, вам нужно будет использовать метод CSS2, который поддерживается вплоть до IE7.

Мои комментарии под этим другим ответом объясняют с сопровождающим fiddle, как body на самом деле смещается от html по умолчанию, даже если кажется, что вместо этого он дополняется, опять же из-за этого, казалось бы, странного явления.

1это может иметь свои корни в установке атрибутов HTML background и bgcolor body , вызывающих применение атрибута background ко всему видовому окну. Подробнее об этом здесь .

Поделиться


BoltClock    

08 июня 2012 в 11:01


5

Предложите прочитать это:

Just One of Those Weird Things About CSS: Background on <body>

По существу, при отсутствии background на элементе html body background будет покрывать страницу. Если в элементе html есть background , то body background ведет себя так же, как и любой другой элемент.

Поделиться


Emmanuel Osimosu    

30 января 2018 в 20:19

Похожие вопросы:

Что означает * HTML Body в таблице стилей css?

В таблице стилей у меня есть: * HTML BODY { padding-right: 0px; padding-left: 0px; padding-bottom: 25px; padding-top: 190px; } * HTML #maincontent { width: 100%; height: 100%; } я знаю, что a….

Применение цвета фона ко всей странице html

у меня есть страница HTML, где у меня есть div под названием container , я пытаюсь использовать bootstrap здесь. Внутри контейнера у меня есть div под названием row . Когда я пытаюсь применить цвет…

Должны ли мы применять CSS к <body> против <html> элементов?

Возможный Дубликат : Следует ли устанавливать глобальные стили css для элемента html или элемента body? Есть несколько действительно интересных дискуссий о применении CSS к <html> и…

Применение CSS к упорядоченному списку-цвет фона под номерами?

У меня есть упорядоченный список, который я оформил двумя способами: Раскрасьте цифры по-разному в соответствии с текстом списка Применение цвета фона и границы к каждому элементу списка См. список…

Стили, применяемые к элементу HTML, всегда переопределяются

Я применяю стили к элементу <html> и к элементу <body> . Возможно ли, чтобы стили на элементе <html> применялись поверх стилей <body ? Применение CSS к <html> , похоже, не…

Нежелательное пространство над <body>, и никакого цвета фона.

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

Является ли хорошей практикой применение стиля к тегу html?

Мне нужно поставить фон изображения для всей страницы. Я использую для этого применение стиля к тегу body . Просто интересно, есть ли хорошая практика, чтобы поместить стиль в тег html

Применение цвета фона к пустому div

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

Можно ли изменить цвет фона (html и body) с помощью semantic-ui

Когда мой файл ejs связан с семантическим пользовательским интерфейсом, вторая ссылка .css не работает. Можно ли изменить цвет фона html и body с помощью semantic-ui? Я связал эти два файла css:…

Цвет фона html body effects цвет фона кнопки

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

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>…</тег> — указание цвета текста по имени.

<тег>…</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета текста</title>
</head>
<body>
<h5>Красный текст заголовка</h5>

<p>Синий текст параграфа.</p>

<p>
 <em>Зеленый курсив.</em>
 <span>Красный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>…</тег> — указание цвета фона по имени.

<тег>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета фона</title>
</head>
<body>
<h5>Заголовок.</h5>

<p>Параграф.</p>

<p>
 <b>Жирный текст.</b>
 <span>Обычный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

Как изменить цвет текста и фона на странице. Самоучитель HTML

Мы с вами в предыдущих главах составили основной шаблон HTML-документов, определились что такое ХТМЛ-теги, научились сохранять и редактировать html-файлы, а в этой главе мы познакомимся с атрибутами тегов и изменим цвет текста и фона страницы.

Откроем наш index.html, для редактирования:

        <html>
        <head>
        <title>Мой первый сайт</title>
        </head>
        <body>
        У меня получилось!!!
        </body>
        </html>

И немного его изменим, добавим атрибуты:

        <html>
        <head>
        <title>Мой первый сайт</title>
        </head>
        <body text="#000000" bgcolor="#ffffff">
        У меня получилось!!!
        </body>
        </html>

Атрибут — это параметр тега, который вставляется в тег «парой»(имя параметра + значение параметра).
Значения атрибутов тега вставляются:
1) text=#000000 без кавычек;
2) text=’#000000′ в одинарных кавычках;
3) text=»#000000″ в двойных кавычках.
Любой из этих вариантов правильный, но если заботиться об этике кода, то лучше использовать двойные кавычки, как в моем примере выше.

Атрибут «text» управляет цветом текста на всей странице, а «bgcolor» управляет цветом фона страницы.

Теперь предлагаю поговорить об цветах для ХТМЛ-документов. Цвет задается:
1) text=»gold» — словами на английской, допустим: gold(золотой), red(красный), green(зеленый) и так далее…
Но цвет может состоять только из одного слова например «red», но если написать «green-red», то браузер это не поймет и просто проигнорирует.
2) text=»#000000″ — цветовая схема RBG(красный зеленый синий). «#» этот символ говорит от том что это номер цвета, первые два символа(в моем примере ноли) говорят сколько мы взяли «красного» цвета, вторые зеленого и последние два синего цвета.
Каждый цвет задается от 00 до FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), например #000000-черный, #ffffff-белый, #ff0000-красный, #00ff00-зеленый #0000ff-синий

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

А теперь вернемся к нашему файлу index.html и сохраним его как tsvet.html, теперь посмотрим что получилось. Каким был, таким и остался? И вы абсолютно правы, т.к белый для фона, а черный для текста цвета по умолчанию. Что-бы заметить разницу изменим значения атрибутов:

        <html>
        <head>
        <title>Мой первый сайт</title>
        </head>
        <body text=gold" bgcolor="#0900b8">
        У меня получилось!!!
        </body>
        </html>

Сохраним и помотрим просмотреть(откроется в новой вкладке)

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

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

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Главная » Основы HTML » Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и на примерах покажу, как сделать фон из цвета или картинки в HTML-странице.
Все довольно просто!
Начнем из цвета!
Я думаю, вы не пропустили урок №11, там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.
Итак, как сделать цветовой фон в HTML…

Цветовой фон в HTML

Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?
В этом нам поможет атрибут «bgcolor». Чтобы закрасить задний фон, пропишите этот атрибут к тегу «body» :

<body bgcolor="#cc0000">

Либо так:

<body bgcolor="red">

Вот полный HTML-код:


<html>
<head>
<title>Изменяем цвет фона – StepkinBlog.ru</title>
</head>
<body bgcolor="#000000" text="green">
Текст страницы будет зеленый, а фон черным.
</body>
</html>

Результат будет вот таким:

Как сделать в HTML картинку фоном

Если вы хотите сделать фон из картинки, тогда к тегу «body» пропишите атрибут «baсkground»:

Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название «fon» с расширением «.gif»):

<body background="fon.gif">

Вот полный HTML-код:


<html>
<head>
<title>фона  – StepkinBlog.ru</title>
</head>
<body background="fon.gif" text="#fff">
Текст страницы на красивом фоне.
</body>
</html>

Результат будет вот таким:

Если фоновая картинка размещена в папке images или в какой-то другой папке, это будет выглядеть так:

<body background="images/fon.gif">

Вот полный HTML-код:


<html>
<head>
<title>фона  – StepkinBlog.ru</title>
</head>
<body background="images/fon.gif" text="#fff">
Текст страницы на красивом фоне.
</body>
</html>

На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.
Жду вас на следующих уроках.

Предыдущая запись
Коды цветов в HTML. Основы HTML для начинающих. Урок №11
Следующая запись
Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13

Как изменить цвет фона в html

Давайте начнем с рассмотрения того, как сделать нашу первую HTML- страницу такой, какой мы хотим ее видеть.

В HTML мы можем установить цвет фона, используя относительный атрибут тега body. Итак:

<body bgcolor="blue">

Палитра цвета

В данной таблица цветов вы можете переводить выбранный вами цвет в RGB код (для создания цвета в графическом редакторе) и HEX код (для обозначения цвета в HTML).

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета доступны с использованием соответствующих ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

<body>

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

<body bgcolor="#0000FF">

HTML таблица цветов

Вы можете скачать палитру цветов которая сожержит более 100 цветов с названиями и кодами
Скачать палитру цветов с кодами

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: “darkblue”, “lightblue” ):

цвет ключевое слово шестнадцатеричное обозначение
оранжевыйorange#ffa500
синийblue#0000ff
белыйwhite#ffffff
желтыйyellow#ffff00
серыйgray#808080
коричневыйbrown#a52a2a
черныйblack#000000
красныйred#ff0000
зеленыйgreen#008000
фиолетовыйviolet#ee82ee

Кстати цвет фона ячейки в таблице задан вот таким образом

<td bgcolor="#ffffff">#ffffff</td>

Количество доступных цветов зависит от видеокарты. Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, которое обеспечивает миллионы цветов.

Цвет фона и настройки экрана

Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.

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

Как установить цвет фона CSS HTML с помощью JavaScript

Изменение CSS для

HTMLElement

Вы можете изменить большинство свойств CSS с помощью JavaScript, используйте этот оператор:

 document.querySelector(<selector>).style[<property>] = <new style>

где <selector> , <property> , <new style> — все объекты String .

Обычно свойство style будет иметь то же имя, что и фактическое имя, используемое в CSS. Но всякий раз, когда существует более одного слова, это будет случай верблюда: например, background-color изменяется на backgroundColor .

Следующий оператор установит фон для #container на красный цвет:

 documentquerySelector('#container').style.background = 'red'

Вот небольшая демонстрация изменения цвета окна каждые 0,5 с:

 colors = ['rosybrown', 'cornflowerblue', 'pink', 'lightblue', 'lemonchiffon', 'lightgrey', 'lightcoral', 'blueviolet', 'firebrick', 'fuchsia', 'lightgreen', 'red', 'purple', 'cyan']

let i = 0
setInterval(() => {
  const random = Math.floor(Math.random()*colors.length)
  document.querySelector('.box').style.background = colors[random];
}, 500)  
 .box {
  width: 100px;
  height: 100px;
}  
 <div></div>

Изменение CSS нескольких

HTMLElement

Представьте, что вы хотите применить стили CSS к нескольким элементам, например, сделать цвет фона всех элементов с именем класса box lightgreen . Тогда вы можете:

  1. выберите элементы с помощью .querySelectorAll code> и разверните их в объекте с помощью синтаксис деструктурирования :

     Array

  2. переберите массив с помощью const elements = [...document.querySelectorAll('.box')]
     и примените изменения к каждому элементу:

     .forEach

Вот демоверсия:

 elements.forEach(element => element.style.background = 'lightgreen')
  
 const elements = [...document.querySelectorAll('.box')]
elements.forEach(element => element.style.background = 'lightgreen')  
 .box {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin: 10px;
}

Другой метод

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

Предполагая, что вы можете заранее подготовить стили в CSS, вы можете переключать классы, открывая <div></div>
<div></div>
<div></div>
<div></div> элемента и вызывая функцию classList :

 toggle  
 document.querySelector('.box').classList.toggle('orange')  
 .box {
  width: 100px;
  height: 100px;
}

.orange {
  background: orange;
}

Список свойств CSS в JavaScript

Вот полный список:

 <div></div>  alignItems
alignSelf
animation
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationName
animationTimingFunction
animationPlayState
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
backgroundClip
backgroundOrigin
backgroundSize</a></td>
backfaceVisibility
borderBottom
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderImage
borderImageOutset
borderImageRepeat
borderImageSlice
borderImageSource
borderImageWidth
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRadius
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopStyle
borderTopWidth
borderWidth
bottom
boxShadow
boxSizing
captionSide
clear
clip
color
columnCount
columnFill
columnGap
columnRule
columnRuleColor
columnRuleStyle
columnRuleWidth
columns
columnSpan
columnWidth
counterIncrement
counterReset
cursor
direction
display
emptyCells
filter
flex
flexBasis
flexDirection
flexFlow
flexGrow
flexShrink
flexWrap
content
fontStretch
hangingPunctuation
height
hyphens
icon
imageOrientation
navDown
navIndex
navLeft
navRight
navUp>
cssFloat
font
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
fontSizeAdjust
justifyContent
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
opacity
order
orphans
outline
outlineColor
outlineOffset
outlineStyle
outlineWidth
overflow
overflowX
overflowY
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
pageBreakInside
perspective
perspectiveOrigin
position
quotes
resize
right
tableLayout
tabSize
textAlign
textAlignLast
textDecoration
textDecorationColor
textDecorationLine
textDecorationStyle
textIndent
textOverflow
textShadow
textTransform
textJustify
top
transform
transformOrigin
transformStyle
transition
transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay
unicodeBidi
userSelect
verticalAlign
visibility
voiceBalance
voiceDuration
voicePitch
voicePitchRange
voiceRate
voiceStress
voiceVolume
whiteSpace
width
wordBreak
wordSpacing
wordWrap
widows
writingMode
zIndex
>

HTML | фон Атрибут

HTML | Атрибут фона

Атрибут фона HTML используется для указания фонового изображения для документа.
Синтаксис:

Значения атрибутов: Он содержит значение, например URL , которое указывает адрес фонового изображения.

  • Абсолютный URL: Указывает на другой веб-сайт.
  • Относительный URL: Указывает на файл на веб-сайте.

Пример:

html

< html >

<

<

0 900

< заголовок >

Атрибут фона тела HTML

заголовок >

голова >

< тело фон =

< центр >

< h2 > GeeksforGeeks h2 >

< h3 90 043> HTML < body > Атрибут фона h3 >

< a href = "#" >

Это портал компьютерных наук Для вундеркиндов

a >

center >

body >

html >

Выход:

Поддерживаемые браузеры: Список браузеров, поддерживаемых атрибутом ниже:

  • Google Chrome
  • Internet Explorer
  • Firefox

    • 9002 2 Safari

  • Opera

Установка или изменение цвета фона HTML

Сегодняшний веб-сайт отображает не только текст.Все мы знаем, что мы можем добавлять или изменять некоторые элементы в HTML. Мы можем добавить изображение, видео, аудио или изменить цвет и стиль. Теперь в этом руководстве мы узнаем о том, как установить или изменить цвет фона HTML с помощью шестнадцатеричных цветовых кодов, имен цветов HTML и значений RGB.

Определение и использование.

Свойство HTML background-color задается для изменения или установки цвета фона элемента. Фон - это общий размер элемента, включая отступы и границу, но не поля.

Установить свойство background-color в элементе HTML

Первый начинается с цвета фона элемента. Когда вы вставите его в элемент, у вас будет полный цвет страницы. Раскрасить тело веб-страницы довольно просто. Просто следуйте этому коду, чтобы установить цвет фона HTML в элементе.

Пример 1: 

  
        
        
             Документ

Вот как HTML-код выше будет отображаться в браузере:

Можно ли установить цвет фона HTML в элементе? Да мы можем.Например, мы изменим цвет фона элемента

.

Пример 2: 

  
        
        
             Документ 
        
            

                

                    
 Раскрашивание фона элемента div 

                    
 Это абзац 

                


                

                    
 Раскрашивание фона элемента div 

                    
 Это абзац 

                


                

                    
 Раскрашивание фона элемента div 

                    
 Это абзац

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с помощью шестнадцатеричного цветового кода

Шестнадцатеричный цветовой код со свойством background-color - самый популярный способ установить цвет фона HTML.Цвет Hex имеет хэштег '#' и цветовой код RRGGBB (#RRGGBB). Это пример применения шестнадцатеричного цветового кода непосредственно к элементу HTML.

Пример 3: 

  
        
        
             Документ 
        
            

                

                    
 Раскрашивание фона элемента div с использованием цвета Hex 

                    
 Цвет шестигранника # FF0000 

                


                

                    
 Раскрашивание фона элемента div с использованием цвета Hex 

                    
 Цвет шестигранника # 00FF00 

                


                

                    
 Раскрашивание фона элемента div с использованием цвета Hex 

                    
 Цвет шестнадцатеричного # 0000FF

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с помощью имени цвета HTML

Второй способ установить цвет фона в HTML - использовать имя цвета HTML.Название цвета - это самый простой способ изменить цвет в HTML-документе. Просто введите название цвета, например Red, Green или Blue, со свойством background-color.

Пример 4: 

  
        
        
             Документ 
        
            

                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета Красный 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета: зеленый 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета: синий 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета Голубой 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета Пурпурный 

                


                

                    
 Раскрашивание фона элемента div с использованием названия цвета 

                    
 Название цвета: желтый

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с использованием значений цвета RGB

Теперь мы установим свойство HTML background-color, используя значения RGB.Используйте тот же атрибут стиля, что и раньше, но замените шестнадцатеричный цвет или имя цвета на значения RGB.

Пример 5: 

  
            
            
                 Документ 
            
                

                    

                        
 Раскрашивание фона элемента div с использованием значений RGB 

                        
 Значения RGB rgb (255,0,0) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием значений RGB 

                        
 Значения RGB rgb (0,255,0) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием значений RGB 

                        
 Значения RGB rgb (0,0,255)

Вот как HTML-код выше будет отображаться в браузере:

При использовании значений RGB у вас есть дополнительная опция для установки, указывающая уровень непрозрачности с альфа-каналом.Это будет контролировать уровень прозрачности фона. Альфа объявляется с буквой «а». Если используется альфа, код формата - «rgba». Значение альфа - 0 и 1, 0 для полной прозрачности и 1 для непрозрачности. Это пример использования значений «rgba».

Пример 6: 

  
            
            
                 Документ 
            
                

                    

                        
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 

                        
 rgba (255,0,0,0.5) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 

                        
 rgba (0,255,0,0.5) 

                    


                    

                        
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 

                        
 rgba (0,0,255,0.5)

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с использованием значений цвета HSL

Цветовые значения HSL менее популярны, чем предыдущие.HSL - это оттенок, насыщенность и яркость. Просто следуйте тому же синтаксису, что и значения RGB, чтобы использовать их для установки цвета фона HTML.

Пример 7: 

  
        
        
             Документ

Вот как HTML-код выше будет отображаться в браузере:

Как и в случае с RGB, вы также можете добавить альфа-канал, чтобы установить уровень непрозрачности для значений HSL.

Пример 8: 

  
        
        
             Документ 
        
        

            

                
 Раскрашивание фона элемента div с использованием HSL с альфа-каналом 

                
 hsla (0,100%, 50%, 0,5)

Вот как HTML-код выше будет отображаться в браузере:

Есть несколько способов установить или изменить цвет фона HTML.Это так легко и просто, запомните это, если вы хотите установить цвет, используйте атрибут «style» и свойство CSS background-color. Синтаксис такой:

  <тег>

Если вы хотите узнать больше о цветовом коде, вы можете увидеть в предыдущем руководстве о цветовых кодах HTML. Вы можете найти полный исходный код этих примеров на нашем GitHub.

Это только основное. Если вам нужно больше узнать о HTML, CSS, Javascript или других подобных областях, вы можете пройти следующий дешевый курс:

Спасибо!

Цвет фона HTML: как настроить фон

Обычная веб-страница имеет белый фон.То же самое с таблицей и текстами. Черный текст на белом фоне очень распространен и скучен. Это было обычным делом в те времена, когда веб-дизайн находился на начальной стадии. Но по мере развития технологий и развития CSS появилось больше возможностей для создания более привлекательных веб-страниц. В настоящее время большинство веб-сайтов имеют красочные веб-страницы. Разработка таких веб-страниц осуществляется путем объединения HTML с CSS. В CSS есть много возможностей для изменения фона всего в HTML. Цвет фона HTML всей страницы, таблиц и даже текста также можно изменить с помощью CSS.В этой другой статье мы предлагаем вам на выбор полную таблицу цветов HTML. Некоторые из способов описаны ниже.

Темы в статье

Цвет фона тела с использованием названий цветов

Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых названий цветов, таких как красный, зеленый, синий и т. Д. Атрибут, используемый для изменения цвета фона - background-color. Ниже приведен пример изменения цвета фона с помощью встроенных стилей.

 


 Эта веб-страница имеет красный цвет фона!

Атрибуту background-color присвоено значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.

Цвет фона тела с использованием шестнадцатеричных кодов цветов

Мир полон красок. Есть много цветов, которые можно использовать при разработке веб-страниц. У каждого цвета есть свое название, например красный, желтый, черный и т. Д.Но у каждого цвета столько оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, кирпичный и т. Д. То же самое и со многими другими цветами. Итак, как использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов. Каждый из этих оттенков имеет шестизначный код. Этот код известен как шестнадцатеричный цветовой код.

Цветовые коды

Hex также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы.Они также используются с атрибутом background-color. Вместо названия цвета используется цифровой знак (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.

 


 Это демонстрационная веб-страница

Обратите внимание на приведенный выше код. Все аналогично предыдущему методу, но с небольшими изменениями.Вместо присвоения имени цвета как значения атрибуту background-color используется # FF00FF. # FF00FF - шестнадцатеричный код пурпурного цвета.

Щелкните здесь, чтобы выбрать любой оттенок с его шестнадцатеричным цветовым кодом.

Изменение цвета фона HTML тега Div

Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это тоже возможно. Div используется для определения подразделения или раздела на веб-странице. Цвет фона таких разделов или разделов также можно изменить с помощью CSS.Есть несколько способов сделать это. Но я объясню самые простые и быстрые из них, то есть встроенные стили.

 




 Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый

В приведенном выше коде цвет фона веб-страницы желтый, а у части div красный фон. В теге div встроенный стиль используется для установки красного цвета фона.# FFF00 и # FF0000 - это шестнадцатеричные коды цветов желтого и красного соответственно.

Изменение цвета фона таблицы

Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов, с помощью которых стол может выглядеть лучше и привлекательнее. Один из таких способов - задать цвет фона. Подобно тегу body и тегу div, тегу таблицы также могут быть присвоены встроенные стили с атрибутом background-color. Ниже приведен пример таблицы с тремя строками и тремя столбцами и зеленым фоном (# 00FF00).

 

<стиль>
table, th, td {
граница: сплошной черный 1px;
}



<таблица>

 Имя 
 Страна 
 Возраст 


 Джон 
 США 
 21 



 Сэм 
 Испания 
 22

В приведенном выше коде встроенный стиль используется в теге таблицы.Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если вы хотите изменить цвет фона определенного столбца.

Изменение цвета фона текста

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

 


  у этого текста нет цвета фона  


  этот текст имеет красный цвет фона  


  этот текст имеет зеленый цвет фона

В приведенном выше коде первый абзац не имеет цвета фона.У второго абзаца фон красного (# FF0000) цвета, а у третьего абзаца фон зеленого (# 00FF00) цвета.

Заключение

С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или к некоторой части веб-страницы с помощью тега div.Таблицам также можно задать цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span. HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.

Как изменить цвет фона в информационном бюллетене электронной почты в формате HTML

Как изменить цвет фона для тела, таблицы и ячейки в электронном письме в формате HTML
Информационный бюллетень

Как изменить цвет фона сообщения?

  • Найдите
    <тег тела и добавить / изменить цвет фона:
    e.грамм.
    Цветовой код - HEX #RRGGBB.
  • Многие шаблоны используют фоновую таблицу,
    потому что некоторые клиенты вырезают тег body.
    Убедитесь, что вы
    также измените цвет фона таблицы.

...



<таблица border = "0" cellpadding = "0" cellspacing = "0">

Здравствуйте!
Весь мир!



...

Как изменить цвет фона таблицы?

Найдите тег

например.

Цветовой код - HEX # RRGGBB #.
или

...
<таблица bgcolor = "# FF0000" border = "0" cellpadding = "0" cellspacing = "0">

Привет, мир!

...

Как изменить цвет фона ячейки?

Мы используем "контентные" таблицы (с одним
ячейка) в большинстве шаблонов с несколькими столбцами, чтобы убедиться, что макет ячейки / таблицы
фиксированный.
Изменить фон
цвет таблицы "содержимого" вместо родительской ячейки
(ЛЕВАЯ ЯЧЕЙКА в примере ниже):

...
<ТАБЛИЦА
border = "0" cellspacing = "0" cellpadding = "0">



<ТАБЛИЦА bgcolor = "# FF0000"
width = "300" border = "0" cellspacing = "0" cellpadding = "0">


В школьные годы большинство из вас, читавших эту книгу, познакомились
с благородным зданием...





...


...

Альтернативный вариант: найдите тег

например

Цветовой код - HEX #RRGGBB.
или

Мы рекомендуем вместо этого использовать таблицы «содержимого»,
поскольку некоторые почтовые клиенты могут не поддерживать цвета фона ячеек!

Как добавить границу вокруг таблицы или ячейки?

Найдите тег

e.грамм.

нарисовал бы пунктирную
Граница 1px и цвет #CCCCCC вокруг ячейки.
например <таблица
будет рисовать сплошную синюю рамку 5 пикселей вокруг
стол.

Вы можете использовать: border, border-left, border-right, border-top,
нижняя граница и комбинации:
например.

будет
нарисуйте линию (границу) слева и справа от ячейки сплошным красным цветом на 1 пиксель.

Учебное пособие по шаблону

Как сделать фоновый рисунок цветным в Dreamweaver | Small Business

Программа редактирования HTML Adobe Dreamweaver позволяет создавать информационные бюллетени, веб-сайты и все остальное, что использует код HTML.Хотя большая часть дизайна выполняется с помощью HTML-кодирования, есть некоторые настройки, которые вы можете изменить через пользовательский интерфейс программы. Одним из таких параметров является цвет фона проекта, который можно изменить в меню «Свойства страницы».

Откройте проект.

Чтобы установить фон для конкретного проекта, необходимо сначала открыть проект в программе Dreamweaver. Дважды щелкните значок программы «Adobe Dreamweaver», чтобы запустить программу. Щелкните меню «Файл» и выберите «Открыть»... ". Найдите файл проекта Dreamweaver на жестком диске компьютера и дважды щелкните файл, чтобы открыть проект в Dreamweaver.

Design View

Dreamweaver имеет три различных режима просмотра: представление« Код », представление« Разделить » и представление «Дизайн». Представление «Код» позволяет вам увидеть код вашего проекта, представление «Дизайн» позволяет увидеть получившийся дизайн, а представление «Разделить» позволяет увидеть оба. Чтобы изменить цвет фона вашего проекта , вам необходимо просмотреть свой проект в режиме просмотра «Дизайн».Для этого щелкните вкладку «Дизайн» в верхней части окна программы Dreamweaver.

Доступ к свойствам страницы

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

Установка цвета фона

Когда вы находитесь в меню «Свойства страницы», вы, наконец, можете установить цвет фона страницы.Щелкните параметр «Внешний вид (HTML)», а затем квадрат справа от заголовка «Фон». Выберите цвет фона, который вы хотите использовать, из цветовой палитры. Кроме того, вы можете ввести цветовой код в поле справа от заголовка «Фон». Нажмите кнопку «Применить», а затем кнопку «ОК», чтобы сохранить изменения.

Ссылки

Писатель Биография

Александр Пуарье начал профессионально писать в 2005 году. Он работал главным редактором литературного журнала "Каллиопа", получив две награды APEX Awards за выдающиеся публикации.Пуарер окончила Тихоокеанский университет со степенью бакалавра искусств по английскому языку.

Как изменить цвет фона таблицы HTML

Что нужно знать

  • Самый простой: добавьте свойство стиля background-color в тег таблицы, строки или ячейки.
  • Следующий самый простой: используйте атрибут bgcolor .

В этой статье объясняются методы изменения цвета фона частей таблицы на веб-сайте.

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

Лучший способ изменить цвет фона - добавить свойство стиля background-color к тегу таблицы, строки или ячейки.

В этом примере изменяется цвет фона всей таблицы:

Чтобы изменить цвет отдельной строки, вставьте свойство background-color в поле

Вы можете изменить цвет отдельной ячейки, добавив атрибут в

Вы также можете применить цвета фона к заголовкам таблиц или

Изменить цвет фона с помощью таблиц стилей

Однако лучше избегать использования атрибута background-color в пользу правильно отформатированной таблицы стилей.Например, вы можете установить стили в таблице стилей в HEAD вашего HTML-документа или установить их во внешней таблице стилей. Подобные изменения в HEAD или внешней таблице стилей могут выглядеть следующим образом для таблиц, строк и ячеек:

таблица {цвет фона: # ff0000; } 
 tr {цвет фона: желтый; } 
 td {background-color: # 000; }

class = "ql-syntax">

Настройка цвета фона столбца

Лучший способ установить цвет фона для столбца - создать класс стиля, а затем назначить его ячейкам столбца.Создание класса позволяет вам назначать этот класс ячейкам в определенном столбце с помощью одного атрибута.

CSS :

td.ColColor {цвет фона: синий; }

class = "ql-syntax">

HTML :

 
 ячейка 1 ячейка 2 ячейка 1 ячейка 2

class = "ql-syntax">

Одним из значительных преимуществ управления цветами фона с помощью таблицы стилей является то, что вы можете изменить свой выбор цвета позже. Вместо того, чтобы просматривать HTML-документ и вносить изменения в каждую отдельную ячейку, вы можете внести одно изменение в выбор цвета в CSS, которое будет немедленно применяться к каждому экземпляру, где появляется синтаксис class = "ColColor" .

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

Спасибо, что сообщили нам!

Расскажите, почему!

Другой

Недостаточно подробностей

Сложно понять

Альтернативный текст для фоновых изображений, доступность альтернативного текста

Избегайте представления информационных изображений на фоне CSS

Если ваше изображение содержит важную информацию для конечного пользователя,
тогда он должен быть предоставлен в HTML

тег с надлежащим
alt
текст.Спецификация CSS гласит:

По причинам доступности авторам не следует использовать фон
изображения как единственный способ передачи важной информации. См. Интернет
Руководство по доступности контента F3 [WCAG20].
Изображения недоступны в неграфических презентациях, и
фоновые изображения могут быть отключены в
высококонтрастные режимы отображения. Источник
.

Не могу избежать использования изображений CSS или добавить замещающий текст для
"неважные" фотографии окружающей среды и т. д.?

Спецификация CSS делает это "ДОЛЖНЫ", а не
"ДОЛЖЕН", потому что бывают случаи, когда визуальный дизайн или
существующий код затрудняет преобразование его в изображение HTML
без редизайна интерфейса.В других случаях автор может захотеть
чтобы предоставить альтернативный текст для окружающего изображения, который является , а не
"важно" для понимания содержания, но из вежливости
пользователям программ чтения с экрана, которые предпочитают знать, что изображено на картинке.
Вот подробная статья об эмбиенте
изображения vs чистое украшение vs информационные образы.

При предоставлении альтернативного текста для изображения CSS есть
количество соображений

Если


в теге есть какое-либо содержимое, тогда
role = "img"
а также
aria-label
может скрыть внутреннее содержимое из-за доступных
расчет имени
, или вспомогательные технологии могут просто игнорировать
aria-label
.

Поэтому не помещайте фоновое изображение CSS внутри


который содержит любой контент. Лучше использовать пустой

и
aria-label
с участием
role = "img"

Сделайте это:

<диапазон role = "img" aria-label = "[поместите альтернативный текст здесь]>

[все остальное мое содержание]

Не делайте этого:


[все остальное
моего содержания]

Что делать, если у автора должно быть изображение CSS в div,
содержит контент

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

, которое завершает другой контент, затем хакерский
запасной вариант - сделать это.

<диапазон role = "img" aria-label = "[поместите альтернативный текст здесь]>

[все остальное мое содержание]

Это взлом, потому что семантически альтернативный текст не включен
элемент, который на самом деле имеет изображение. Однако с экрана
читатель видит


с фоновым изображением игнорируется, поэтому размещение

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

Сводка

  • Старайтесь не использовать CSS для важных информационных изображений
  • Для окружающих изображений, которые являются CSS, любезно
    предоставить альтернативный текст. При этом поместите изображение в собственное
    пустой с этикеткой aria
    и role = "img. Это также верно в ситуации
    где CSS должен использоваться для информационного содержания.
  • Если
    с изображением CSS
    ОБЯЗАТЕЛЬНО ДОЛЖЕН содержать другой контент, а затем предоставить пустой
    с aria-label и role = "img"
    сразу после

    , имеющего
    изображение.

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

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