Style html image background: HTML Background Images

Leave a Comment / Html / By /

background | CSS | WebReference

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

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

Значение по умолчаниюtransparent || none || repeat || scroll || 0% 0%
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip

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

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

Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.
inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и другие многочисленные национальные резерваты природы и парки, неумеренно применяет культурный рельеф.
Суша морей начинает туристический подземный сток. Дождливая погода дегустирует кандым. Винный фестиваль проходит в приусадебном музее Георгикон, там же беспошлинный ввоз вещей и предметов в пределах личной потребности связывает белый саксаул. Санитарный и ветеринарный контроль оформляет городской Гвианский щит.</div> </body> </html>

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

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

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

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

Объект.style.background

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

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

 
один фон41213.
5		11
несколько фонов912110.51.33.6
один фон2.11103.2
несколько фонов2.11103.2
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Цвет и фон

См. также

  • background-attachment
  • background-clip
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • Линейный градиент
  • Несколько фоновых картинок
  • Спрайты
  • Установка фона и градиента
  • Фоновая картинка

Рецепты

  • Как вместо символа маркера использовать картинку?
  • Как добавить две фоновые картинки к одному элементу?
  • Как добавить рисунок к внешним ссылкам?
  • Как изменить цвет кнопки?
  • Как изменить цвет ссылки при наведении?
  • Как размыть фоновую картинку?
  • Как указать язык сайта по ссылке?

Практика

  • Атрибут style
  • Полупрозрачный фон
  • Сокращённое значение цвета
  • Фоновая картинка
  • Цвет в RGB
  • Цвет фона таблицы
  • Цвет фона у ссылок
  • Шестнадцатеричный цвет

Как вставить фоновое изображение в HTML?

Как вставить фоновое изображение в HTML?

Как вставить фоновое изображение в HTML?

share-outline Курс Javascript — Освоение основ

Мринал Бхаттачарья

Бесплатно

star 4. 8

Зачислено:

1000

9000 9 Курс Javascript — Освоение основ

Мринал Бхаттачарья

Бесплатно

Начать обучение

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

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

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

  1. Атрибут фона в HTML
  2. Свойство background-image в CSS

Кроме того, фоновое изображение также может быть вставлено с элементом HTML. Мы узнаем больше об этом в следующих нескольких разделах.

Использование атрибута фона

Самый простой способ добавить фоновое изображение на веб-страницу — использовать атрибут фона в теге HTML. Это добавит фоновое изображение на всю страницу.

Синтаксис:

Где имя_изображения — это имя изображения, а расширение_изображения — расширение изображения в зависимости от формата. Некоторые примеры: jpeg и png.

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

Для этого мы просто добавим атрибут фона к тегу body страницы, как показано ниже.

Пример:

Вывод:

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

Использование фонового изображения в CSS

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

HTML 5 не поддерживает атрибуты фона в теге, поэтому фон веб-сайта управляется с помощью CSS.

Синтаксис:

URL-адрес изображения может быть указан как:

  1. url(‘url’) : Используйте запятую для разделения URL-адресов нескольких изображений.
  2. нет : По умолчанию изображение не отображается.
  3. начальный : Это позволяет установить для свойств значения по умолчанию.
  4. наследовать : Это позволяет наследовать свойство от его родителя.

Вы также можете использовать background-image со следующими значениями:

  1. linear-gradient() : Этот метод устанавливает фоновые изображения с линейным градиентом, используя как минимум два цвета сверху вниз.
  2. radial-gradient() : Этот метод устанавливает фоновое изображение с радиальным градиентом, которое имеет как минимум два цвета от центра к краю

Давайте воспользуемся приведенными выше значениями свойств и рассмотрим их в приведенных ниже примерах.

1. url(‘url’) : Используется при наличии URL-адреса фонового изображения

Синтаксис:

Пример 1 : В этом примере свойство фонового изображения иллюстрируется установкой атрибут url как url.

Вывод:

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

Синтаксис:

Пример 2 : В этом примере мы устанавливаем значение url равным none, чтобы продемонстрировать свойство background-image.

Вывод

3. Исходный : Это свойство всегда устанавливает значение по умолчанию.

Синтаксис:

Пример 3 : В этом примере мы устанавливаем значение url как начальное, чтобы продемонстрировать свойство background-image.

Вывод:

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

Синтаксис:

Мы также можем закодировать приведенный выше пример, используя свойство background-image в CSS вместо использования атрибута background в HTML. Это можно сделать, как показано ниже:

Вывод:

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

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

Пример:

Вывод:

Как вставить фоновое изображение в элемент HTML?

Фоновое изображение можно добавить к любому элементу HTML аналогично тому, как мы используем его при добавлении к элементу body. Все, что вам нужно сделать, это добавить атрибут фона к другому элементу.

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

Вывод:

Как видно на изображении выше, мы создаем изображение из градиента розового и синего цветов и назначаем его идентификатору градиента. Высота этого идентификатора составляет 200 пикселей. И он содержит текст Я счастлив!.

Кроме того, вы также можете использовать встроенный стиль CSS, используя свойство background-image для достижения той же цели.

Вывод:

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

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

Пример:

Вывод:

Как показано выше, атрибут background-size помогает нам разместить изображение на экране. Кроме того, в случае очень маленьких изображений вы можете использовать атрибут background-repeat и использовать с ним значение no-repeat, чтобы изображение не повторялось на экране.

Подробнее

Дополнительные сведения о том, как вставить фоновое изображение в HTML, см. в разделе ФОНОВОЕ ИЗОБРАЖЕНИЕ В HTML.

Заключение

  • Фоновые изображения делают веб-сайт более привлекательным.
  • Фоновые изображения в HTML можно добавить с помощью свойства background-image в CSS, внутренней таблицы стилей или атрибута background в HTML.
  • По умолчанию изображения добавляются к фону слева и повторяются для заполнения экрана, если не указано иное.
    • Шаг 1 Значение , как показано ниже:

    1. body{ цвет фона: черный;}
    или

    1. body{ фоновый цвет:#000;}

    Шаг 2

     

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

     

    Код CSS , как показано ниже:

    1. h2  {background-color:#888822;}  
    2. p   {background-color:#E0FF00;}  
    3. раздел {фоновый цвет:#888888;}

    Код HTML , как показано ниже:

    1. 0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd»>  
    2.   
    3. <голова>  
    4.     Демо  
    5.       
    6.    
    7.   
    8. <тело>  
    9. <тело>  
    10.    
    11.     

      Пример фона CSS!

        
    12.     <дел>  
    13.         Это текст внутри элемента div.
    14.         

      У этого абзаца есть собственный цвет фона.

        
    15.             Мы все еще находимся в элементе div.
    16.     
  
  •    
  •   

  • Вот результат как , отображаемый браузером :

     

     

    Шаг 3

     

    Мы можем установить изображение также на фоне , как показано ниже:

     

    9000 4 Код CSS , как показано ниже:

    1. body {background: url(‘ socials.