Разное

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

02.09.2021

Содержание

background | htmlbook.ru

CSSInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.16.0+8.0+1.0+3.5+1.0+1.0+2.1+1.0+
39.0+1.0+10.5+1.3+3.6+2.1+1.0+

Краткая информация

Версии CSS

Описание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>

  <div>
   Duis te feugifacilisi.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(images/hand.png) repeat-y, 
                #fc0 url(images/bg-right.png) repeat-y 100% 0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

[window. ]document.getElementById(«elementID»).style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Атрибут 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>

Как задавать цвет фона HTML документа

В уроке Основы HTML мы рассмотрели самые главные html теги, которые являются обязательными и присутствуют в любом html документе.

В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.

Материалы по теме:

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

Цвет фона всего html документа, задается в теге <body>. Теперь сделаем фон нашего документа, например желтым. Для этого в теге <body> необходимо прописать атрибут bgcolor=»#FFFF99″. Прописывается данный атрибут следующим образом: <body bgcolor=»#FFFF99″> </body>. Таким образом, код нашей html странички с желтым фоном будет выглядеть так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="#FFFF99">Вот вы и создали свою первую web страницу!!!</body>
</html>

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

После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor=»», который задает цвет фона, содержит в кавычках значение «#FFFF99» — это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.

Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку. Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.

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

Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо «#FFFF99» прописать «red» т. е. <body bgcolor=»red»> то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 12 Январь 2010

Просмотров: 102730

Фон и границы — Изучение веб-разработки

В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.

CSS свойство

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

.box {
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
  url(big-star.png) center no-repeat, rebeccapurple;
} 

Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.

Фоновый цвет

Свойство background-color определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет <color>. background-color распространяется на сам контент и отступы от него (padding).

В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу <span>.

Поиграйте с ними, используя любое доступное значение <color>.

Фоновое изображение

Свойство background-image позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом — маленькое изображение звезды.

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

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

Свойство  background-repeat

Свойство background-repeat используется для управления повторениями фонового изображения. Доступные значения:

  • no-repeat — останавливает повторение фонового изображения во всех направлениях.
  • repeat-x — повторение фонового изображения по горизонтали.
  • repeat-y — повторение фонового изображения по вертикали.
  • repeat — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.

Попробуйте эти значения в примере ниже. Мы установили значение no-repeat, поэтому вы видите только одну звезду. Попробуйте разные значения — repeat-x и repeat-y чтобы увидеть, какие эффекты они оказывают.

Изменение размеров фонового изображения

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

Вы также можете использовать ключевые слова:

  • cover — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
  • contain — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.

Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

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

Попробуйте следующее.

  • Измените значения длины, используемые для изменения размера фона.
  • Измените значение длины на background-size: cover или background-size: contain
  • Если ваше изображение меньше размеров блока, вы можете изменить значение свойства background-repeat, чтобы повторить изображение.
Позиционирование фонового изображения

Свойство background-position позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой левый верхний угол блока равен (0,0), а сам блок располагается вдоль горизонтальной (x) и вертикальной (y) осей.

Примечание: По умолчанию значение background-position равно (0,0).

Обычно свойство background-position задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.

Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице background-position):

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
} 

Допустимы значения длины и процентные:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
} 

Вы также можете смешивать значения ключевых слов с длинами или процентами, например:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока — единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
} 

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

Примечание: background-position — это сокращение для background-position-x и background-position-y (en-US), которые позволяют вам устанавливать различные значения положения по оси индивидуально.

Градиент в качестве фона

Градиент — при использовании для фона — действует так же, как изображение, и поэтому задаётся свойством background-image.

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

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

Несколько фоновых изображений

Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image запятыми.

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

Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.

Другие свойства background- * также могут иметь значения, разделённые запятыми,  как и background-image:

background-image: url(image1. png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться — в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться — image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.

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

Закрепление фона

Другая опция, которую можно применить к фону, — это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства background-attachment, которое может принимать следующие значения:

  • scroll: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
  • fixed: Фиксирует  элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
  • local: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.  

Свойство background-attachment действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями — взгляните на background-attachment.html (также смотри исходный код здесь).

Использование сокращённого свойства background

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

При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением no-repeat и положением, затем цвет.

При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:

  • background-color можно указывать только после последней запятой.
  • Значения background-size могут быть включены только сразу после background-position, разделённые символом ‘/’, например: center/80%

Посетите страницу MDN свойства

, чтобы увидеть полное описание.

 

Доступность просмотра

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

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

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

Мы можем установить границу для всех четырёх сторон блока с помощью border:

.box {
  border: 1px solid black;
} 

Или мы можем нацеливаться на один край блока, например:

.box {
  border-top: 1px solid black;
} 

Индивидуальные свойства этих сокращений будут следующими:

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
} 

И более детально:

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
} 

Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

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

Закруглённые углы

Закругление углов блока достигается с помощью свойства border-radius и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе — вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.

Например, чтобы сделать все четыре угла блока радиусом 10px:

.box {
  border-radius: 10px;
} 

Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

.box {
  border-top-right-radius: 1em 10%;
} 

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

Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:

  1. Задайте рамку равную 5px black solid,  с закруглёнными углами 10px.
  2. Добавить фоновое изображение (используйте URL balloons.jpg) и установите размер таким образом, чтобы он покрыл весь блок.
  3. Задайте для <h3> полупрозрачный чёрный цвет фона и сделайте текст белым.

 

Примечание: вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!

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

В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?

Как сделать фон в HTML?

Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку. Не исключено, что из этой статьи Вы узнаете много нового, но создавал я её специально для новичков. Поэтому всё будет максимально коротко и подробно одновременно. Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.

Чтобы задать фон в HTML используйте промежуточный DOCTYPE

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Как создаётся фон на веб-странице?

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

Фон HTML-документа и его элементов

Второе, что Вам нужно знать – это различие между телом документа и элементом документа. Тело документа обозначается в HTML-коде веб-страницы тегом BODY, который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.

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

Атрибут bgcolor для создания фонового цвета

Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor, например:

<body bgcolor=»#ec008c»>
  <!— тело документа —>
</body>

В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE:

<table bgcolor=»#ec008c»>
<tr>
  <td>Текст с фоном</td>
</tr>
</table>

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

Как узнать код цвета?

Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом, например: #ec008c. Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов. Например, в Photoshop можно использовать «Eyedropper Tool» (Пипетка) для получения цвета из точки на картинке. Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker» (Выбор цвета) скопировать код цвета.

Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.

Также Вы можете использовать многочисленные онлайн сервисы, например:

Их принцип работы ещё проще – кликаете нужный цвет и получаете его код.

Атрибут background для создания фоновой картинки

Также как в случае с фоновым цветом, так и в случае с фоновой картинкой, Вам нужно использовать специальный атрибут, а именно background, например:

<body background=»/2014/06/bg.jpg»>
  <!— тело документа —>
</body>

В данном случае мы задаём фоновую картинку для страницы в целом. Примечательно, что из-за ограничения размеров картинки, она будет повторяться, например:

Как вы видите, при повторении, заметен переход между картинками. Поэтому зачастую используются специальные картинки, где этот момент учтён.

А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE:

<table background=»/2014/06/bg.jpg»>
<tr>
  <td>Текст с фоном</td>
</tr>
</table>

Примечательно, что фоновую картинку можно задать только для таблицы в целом и/или её отдельной ячейки. Для строки это не получится.

Абсолютный и относительный путь к фоновой картинке

Отдельно стоит уделить внимание адресу фоновой картинки. В данном случае используется относительный путь к картинке, т.е. адрес указан относительно места нахождения файла картинки к файлу веб-страницы. Такой вариант нельзя назвать особо удачным. Лучше всего использовать абсолютный путь к картинке, т.е. полный её URL-адрес, например:

<body background=»/images/bg.jpg»>
  <!— тело документа —>
</body>

В таком случае у Вас не возникнет сопутствующих проблем. Подробней об это Вы можете почитать тут.

Подведём итоги

Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE. Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета. Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/03TsNz

масштабируем фон — учебник CSS

Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

  • auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

    
    background-size: auto auto;
    

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

    
    background-size: 250px auto;
    

    …то высота фоновой картинки будет вычисляться автоматически.

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




  • cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.




Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:


background-size: 300px 300px;

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




Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:



Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.


Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

» Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга <body>. Хочу зацепить тег <body>, так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML  страницы. А теперь подробней и с примером.
Вот атрибуты, которые мы сейчас рассмотрим:

TEXT – этот атрибут задает цвет текста всего документа.
BGCOLOR – этот атрибут указывает цвет фона HTML странице.
BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

Изменяем цвет текста с помощью атрибута text.

Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:

<body text=»#cc0000″>

или обычным названием цвета:

<body text=»green»>

Код кодировки и название цвета для HTML вы посмотрите тут.

Вот пример:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="#cc0000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

<body bgcolor=»#000000″>

или обычным названием цвета:

<body bgcolor=»green»>

Вот пример:


<html>
<head>
<title>Изменяем цвет фона с помощью атрибута BGCOLOR</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="#000000" text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="green" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут  BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.

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

<bоdy baсkground=»fon.gif»>

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

<bоdy baсkground=»images/fon.gif»>

Вот пример:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="fon.gif" text="black">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="images/fon.gif" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Вот и все.
Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: html, основы

CSS-фонов


Свойства фона CSS используются для добавления фоновых эффектов. для элементов.


В этих главах вы узнаете о следующих свойствах фона CSS:

  • цвет фона
  • фоновое изображение
  • фон-повтор
  • фон-приставка
  • фоновая позиция
  • фон (сокращенное свойство)

CSS цвет фона

Свойство background-color определяет цвет фона элемента.

Пример

Цвет фона страницы устанавливается следующим образом:

корпус {
фоновый цвет: светло-голубой;
}

Попробуй сам »

В CSS цвет чаще всего задается следующим образом:

  • допустимое название цвета — например, «красный»
  • шестнадцатеричное значение, например «# ff0000»
  • значение RGB — например, «rgb (255,0,0)»

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


Прочие элементы

Вы можете установить цвет фона для любых HTML-элементов:

Пример

Здесь элементы

,

и

будут иметь разные цвета фона:

h2 {
цвет фона: зеленый;
}

div {
цвет фона: светло-голубой;
}

p {
цвет фона: желтый;
}

Попробуй сам »

Непрозрачность / прозрачность

Свойство непрозрачности определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:

Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы наследуют ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.


Прозрачность с использованием RGBA

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

Из нашей главы о цветах CSS вы узнали, что вы можете использовать RGB в качестве значения цвета. Помимо RGB, вы можете использовать значение цвета RGB с каналом alpha (RGB A ), который определяет непрозрачность цвета.

Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр — это число от 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.

Пример

div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с непрозрачностью 30% * /
}

Попробуй сам »

background-image — CSS: каскадные таблицы стилей

Свойство background-image CSS устанавливает одно или несколько фоновых изображений для элемента.

Фоновые изображения рисуются с наложением слоев контекста друг на друга. Первый указанный слой рисуется так, как если бы он был ближе всего к пользователю.

Затем поверх них рисуются границы элемента, а под ними рисуется цвет фона . То, как изображения рисуются относительно блока и его границ, определяется свойствами CSS background-clip и background-origin .

Если указанное изображение не может быть нарисовано (например, когда файл, обозначенный указанным URI, не может быть загружен), браузеры обрабатывают его так же, как и значение none .

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

Каждое фоновое изображение указывается либо как ключевое слово none , либо как значение .

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

  фоновое изображение:
  linear-gradient (вниз, rgba (255,255,0,0.5), rgba (0,0,255,0.5)),
  url ('https://mdn.mozillademos.org/files/7693/catfront.png');  

Значения

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

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

  # 

, где
= none | <изображение>

, где
<изображение> = | <изображение ()> | <набор изображений ()> | | <краска ()> | <плавное затухание ()> | <градиент>

где
= image (? [?, ?]!)
= image-set ( #)
= element ()
= paint (, ?)
<переходное затухание ()> = плавное затухание (, ?)
= | <повторяющийся линейный градиент ()> | <радиальный градиент ()> | <повторяющийся радиальный градиент ()> |

, где
= ltr | rtl
= | <строка>
<цвет> = | | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <устаревший системный цвет>
<параметр-набор-изображений> = [<изображение> | <строка>] [<разрешение> || type ()]
=
= <процент>? && <изображение>
= <изображение> |
= linear-gradient ([ | to ]?, )
= повторяющийся-линейный-градиент ([<угол> | до <стороны- или-угла>]?, <список-остановок-цветов>)
<радиальный-градиент ()> = радиальный-градиент ([ || ]? [at ]?, )
= повторяющийся-радиальный-градиент ([ || ]? [at ]?, )
= conic-gradient ([from ]? [at ] ?, )

где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)
<сторона-или-угол> = [слева | справа] || [наверх | внизу]
<список-остановок-цветов> = [<остановка-цветов> [, <подсказка-цветов>]? ] #,
= круг | эллипс
<размер> = ближайшая сторона | дальняя сторона | ближайший угол | дальний угол | <длина> | <длина-процент> {2}
<позиция> = [[слева | центр | справа] || [наверх | центр | внизу] | [слева | центр | право | <длина- процент>] [наверх | центр | внизу | <длина-процент>]? | [[слева | справа] <длина-процент>] && [[вверх | внизу] <длина-процент>]]
<угловой-список-остановок> = [<угловой-цвет-стоп> [, <угловой-цвет-подсказка>]? ] #, <угловой-цветной-стопор>

, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> | <угол>
= ?
<линейный-цвет-подсказка> = <длина-процент>
<длина-процент> = <длина> | <процент>
<угловая-цвет-остановка> = <цвет> && <цвет-остановка-угол>?
=

, где
= {1,2}
= {1,2}
<угол-процент> = <угол> | <процент>

Наслоение фоновых изображений

Обратите внимание, что изображение звезды частично прозрачно и накладывается на изображение кошки.

HTML
  

Этот абзац полон кошек
и звезд.

Этого абзаца нет.

Вот вам еще кошек.
Посмотрите на них!

И не более того.

CSS
  п {
  размер шрифта: 1.5em;
  цвет: # FE7F88;
  фоновое изображение: нет;
  цвет фона: прозрачный;
}

div {
  фоновая картинка:
      url ("https: // mdn.mozillademos.org/files/6457/mdn_logo_only_color.png ");
}

.catsandstars {
  фоновая картинка:
      url ("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
      URL ("https://mdn.mozillademos.org/files/7693/catfront.png");
  цвет фона: прозрачный;
}
  
Результат

Таблицы BCD загружаются только в браузере

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

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

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

  

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

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

Пример:

html

< html >

03

0

0 900 < title >

HTML body Background Attribute

title >

head >

< тело фон =

< центр >

< h2 > GeeksforGeeks h2 >

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

< a href = "#" >

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

a >

center >

body >

html >

Вывод:

Поддерживаемые браузеры: Браузеры поддерживаются в списке фоновых атрибутов ниже:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • 9000 9 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 с использованием шестнадцатеричного цвета

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

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

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

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

Цвет шестнадцатеричного кода # 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

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

  • Самый простой: добавьте свойство стиля 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 снижает количество ошибок, ускоряет разработку и улучшает переносимость вашего документа. .

Добавить фоновое изображение в настраиваемый HTML-шаблон

Эта страница теперь доступна на других языках.

английский Español Français Português Deutsch

Для дальнейшего улучшения дизайна ваших маркетинговых кампаний вы можете добавить фоновое изображение в собственный шаблон Code your own в конструкторе шаблонов Mailchimp.

Пользовательские шаблоны HTML являются расширенной функцией и рекомендуются пользователям, знакомым с пользовательским кодированием. Свяжитесь со своим разработчиком или наймите эксперта Mailchimp, если вам нужна помощь.

Из этой статьи вы узнаете, как добавить фоновое изображение в свой собственный HTML-шаблон.

Перед тем как начать

Перед тем, как начать этот процесс, необходимо знать следующее.

  • Фоновые изображения могут отображаться не во всех почтовых клиентах, поэтому убедитесь, что вы знаете, какие почтовые клиенты поддерживают фоновые изображения, ознакомившись с нашей статьей поддержки CSS для почтового клиента.
  • Большие изображения могут привести к неправильному отображению кампаний в почтовых ящиках получателей. Для достижения наилучших результатов установите разрешение 920 x 1080 пикселей или меньше и сожмите изображение.
  • Разместите свои изображения на общедоступном сервере или воспользуйтесь бесплатным сервисом, например Imgur или Flickr, и используйте абсолютный путь к файлу, который указывает непосредственно на расположение файла в коде. Имейте в виду, что если вы размещаете свои собственные изображения на частном сервере, получатели без доступа к серверу не смогут увидеть изображение.
  • Mailchimp также может разместить ваши изображения для вас в студии контента, если они меньше 10 МБ.
  • Вы также можете добавить фоновое изображение в обычную кампанию. Чтобы узнать больше, ознакомьтесь с нашей статьей «Добавление фонового изображения в кампанию».

Добавьте фоновое изображение в свой собственный HTML-шаблон

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

Чтобы добавить фоновое изображение в пользовательский шаблон HTML, выполните следующие действия.

    1. Щелкните значок Кампании .
  1. Щелкните Шаблоны электронной почты .
  2. Щелкните Создать шаблон .
  3. Щелкните вкладку Кодируйте свой собственный и выберите Вставить в код .
  4. В редакторе кода вставьте следующий код сразу после открывающего тега , чтобы добавить фоновое изображение и цвет заполнителя.
      

    Этот код отображает URL-адреса изображений-заполнителей и цвета. На следующем шаге вы замените их своим изображением и информацией о цвете.

  5. Замените два URL-адреса фонового изображения-заполнителя и значения цвета фона-заполнителя в этом примере кода на выбранный вами шестнадцатеричный цветовой код и абсолютный путь к файлу для URL-адреса изображения.
  6. Вставьте следующий код непосредственно перед закрывающим тегом .

      
  7. Замените или отредактируйте оставшийся код кампании своим собственным HTML.

  8. Когда вы закончите редактировать код, нажмите Сохранить .
  9. Нажмите Сохранить и выйти из .
  10. В модальном всплывающем окне Сохранить шаблон назовите свой шаблон.
  11. Щелкните Сохранить.

Вы можете получить доступ к своему новому шаблону в конструкторе кампании или на странице "Шаблоны".

Тестирование и устранение неисправностей

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

Предварительный просмотр и тестирование вашей кампании по электронной почте
Тестирование с предварительным просмотром папки «Входящие»

Вот еще несколько советов по работе с фоновыми изображениями.

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

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

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

Цвет фона электронного письма HTML: лучший способ их кодирования

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

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

Из этого сообщения в блоге вы узнаете:

Зачем использовать фоновые цвета в электронной почте?

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

Выделиться во входящих

Вы можете создать эффектное открытие, как это письмо от Blurb.

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

Источник: Really Good Emails

Отдельные разделы

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

Рекламные письма от гиганта кофейни Starbucks могут быть довольно длинными, поскольку в одном письме содержится несколько рекламных сообщений. Чтобы разделы выделялись друг от друга, используются разные цвета фона.

Просмотреть это письмо в Litmus

Повышение идентичности бренда

Градиенты являются частью фирменного стиля Marketing Agency 1973 Ltd, поэтому вы часто найдете жирные линейные градиенты на фоне их электронных писем.Фоновые градиенты могут сделать композиции более динамичными и даже побудить подписчика к прокрутке.

Источник: Really Good Emails

Итак, как лучше всего применить эти методы при разработке электронной почты? Я попросил своего товарища по команде и разработчика электронных писем Litmus, Карин Слейтер, рассказать нам о кодировании сплошных и градиентных фонов.

Как закодировать сплошной цвет фона электронного письма HTML

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

Почтовый клиент для поддержки цветов фона

Код стиля Свойства CSS
«фон» и «цвет фона»
HTML-атрибут «bgcolor»
Цветовой код шестизначное шестнадцатеричное 3-значное шестнадцатеричное RGB RGBA шестизначное шестнадцатеричное 3-значное шестнадцатеричное RGB RGBA
Apple Mail 14 ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook 2016 (macOS 10.12,6) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook 13, 16, 19 (Windows 10) ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Outlook Office 365 (Windows 10) ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Outlook Office 365 (Mac OS 10.15) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Почта Windows 10 ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Приложение Gmail (Android 10) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Приложение Gmail (iOS 13.4.1) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook (Android 7.0) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook (iOS 12.0) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Samsung Mail (Android 7.0) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
iPad 11 Air (Gen 4 iOS 14.2) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
iPhone 12 (iOS 14.2) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
AOL Mail (Edge) ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Comcast (край) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Gmail (Chrome) ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Office 365 ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Outlook.com ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✓ Да ✘ Нет ✘ Нет
Web.de ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет
Yahoo! Почта ✓ Да ✓ Да ✓ Да ✘ Нет ✓ Да ✘ Нет ✘ Нет ✘ Нет

Все мы знаем, что почтовые клиенты могут быть немного привередливыми.Итак, как лучше всего закодировать цвета фона, чтобы он работал во всех почтовых клиентах? Я объясню вам наши рекомендации и объясню, почему.

1. Используйте таблицы и ячейки таблицы

В HTML-коде есть четыре места, в которые можно добавить цвет фона:

  • <таблица>

Самое безопасное место для добавления цвета фона - это таблица или ячейка таблицы.

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

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

Чтобы получить самую широкую поддержку почтового клиента, оберните всю электронную почту в тег

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

2. Добавьте цвет с помощью свойства CSS и цветовых кодов HEX или значений RGB.

Цвета фона можно закодировать несколькими способами:

  • Использование HTML-атрибута bgcolor
  • Использование свойства CSS background-color
  • Использование сокращенного CSS свойства background
  • Использование шестизначного шестнадцатеричного кода цвета
  • Использование трехзначного шестнадцатеричного цветового кода
  • Использование значений цвета RGB

Что касается того, как поставить цвет фона на таблицу или ячейку таблицы, вы должны использовать свойство CSS.

При тестировании двух методов свойств CSS - background-color и background - мы обнаружили, что оба они дают одинаковые согласованные результаты, пока вы только добавляете цвет (без изображений). Согласно caniemail.com, использование свойства background для чего-либо, кроме добавления цвета, может привести к тому, что ваш цвет не будет отображаться.

HTML-атрибут bgcolor не очень хорошо работал в Outlook из-за непоследовательной поддержки трехзначных HEX-кодов. А использование значений RGB и RGBA привело к неправильному цвету или полностью пропаданию цвета.

Вот наш тест цвета фона с использованием различных методов в Outlook, чтобы вы могли убедиться сами:

См. Этот тест в Litmus →

. В других почтовых клиентах трехзначный HEX-код отображался хорошо, но значения RGB и RGBA приводили к неправильным цветам при применении к атрибуту bgcolor HTML.

См. Этот тест в Litmus →

После всего нашего тестирования мы пришли к одному выводу: придерживайтесь свойств CSS и используйте 3- или 6-значные HEX-коды или значения RGB.

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

Ваш адрес email не будет опубликован.