Разное

Background картинка css: background-image | htmlbook.ru

17.07.2021

img или background-image? Что лучше?

Вы здесь

Главная → Блог → CSS → img или background-image? Что лучше?

Раздел: 

В любом дизайне сайта используются картинки. Но мало кто задумывается над вопросом а когда именно при верстке макета стоит применять html тег img, а когда css свойство background-image? Есть ли между ними вообще различие? На самом деле есть и достаточно существенное. Об этом и пойдет речь в данной статье.

Главное различие img и background-image

Когда мы вспоминаем основное назначение html и css оно для нас становится очевидным, но почему-то пока над этим не задумываешься заметить его становится не так уж и просто.

Различие состоит в том, что картинки несущие смысловую нагрузку или же каким-либо образом относящиеся к содержанию страницы следует вставлять тегом img (картинки в тексте, баннеры, картинки слайдера, аватарки и тд). Все остальное (просто элементы оформления: различного рода разделители, маркеры, фоны и тд. ) следует вставлять в дизайн используя background-image.

В чем преимущества данного подхода?

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

Нюансы из практики

  • При печати страницы сайта теги img печатаются, а background-ы нет.
  • Все, что желательно к индексации поисковиками выводим картинками, все что хотим скрыть- фонами.
  • Браузеры разработанные для людей с ограниченными возможностями читают альты картинок, потому если изображение несет важный смысл, оно обязательно должно быть оформлено html тегом.
  • Некоторые старые браузеры не поддерживают свойство background-size и для создания масштабируемого фона в них используется тег, а не свойство фона.
  • Img с анимацией меньше нагружает браузеры.
  • Для замены текста изображением лучше использовать background-image (к примеру, если нужно вывести заголовки красивыми картинками).
  • Используя свойство фона мы можем вывести на странице только часть изображения.
  • Вытекающая из предыдущего пункта фишка- background-image дает возможность использовать метод спрайтов (за счет того, что все иконки подгружаются с 1 картинки уменьшается количество обращений к серверу при загрузке страницы, что положительно сказывается на скорости) для ускорения загрузки сайта.
  • Картинку спрятанную в фон сайта сложнее выкачать. Хотя как по мне для защиты своих уникальных изображений лучше использовать свои подписи на них, это хоть заставит плагиатщиков повозиться с приведением ее в порядок или же использовать прочие способы защиты уникального контента от копирования.

Подводя итоги

Ничего сложного в размежевании методов вывода изображений нет. С практикой все становится на свои места и даже интуитивно понятно, главное помнить, что все связанное с оформлением сайта должно быть помещено в css, а все связанное с его структурой и смысловым наполнением в html.

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

Оптимизация сайта

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

Стиль HTML DOM backgroundImage Свойство

❮ Назад ❮ Справочник по объектам стиля Далее ❯

Пример

Установить фоновое изображение для документа:

document.body.style.backgroundImage = «url(‘img_tree. png’)»;

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

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

Свойство backgroundImage устанавливает или возвращает фоновое изображение элемента.

Совет: В дополнение к фоновому изображению вы также должны указать фоновый цвет. Фоновый цвет будет использоваться, если изображение недоступно.

См. также:

Стили HTML: Свойство фона

Учебник CSS: Фоны CSS

Учебник CSS3: Фоны CSS3

Справочник по CSS: Свойство background-image

Синтаксис

объект .style.backgroundImage

Установите свойство backgroundImage:

объект .style.backgroundImage = «url(‘ URL ‘)|none|initial|inherit»

Значения свойств

Значение Описание
URL( ‘URL’ ) Расположение файла образа
нет Нет фонового изображения. Это по умолчанию
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Технические детали

Значение по умолчанию: нет
Возвращаемое значение: Строка, представляющая фоновое изображение
Версия CSS CSS1

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

backgroundImage — это функция CSS1 (1996).

Полностью поддерживается во всех браузерах:

Хром Край Фаерфокс Сафари Опера ИЭ
Да Да Да Да Да Да

Дополнительные примеры

Пример

Установка фонового изображения для определенного элемента

:

document. getElementById(«myDiv»).style.backgroundImage = «url(‘img_tree.png’)»;

Попробуйте сами »

Пример

Вернуть фоновое изображение определенного элемента

:

let img = document.getElementById(«myDiv»).style.backgroundImage;

Попробуйте сами »

Пример

Вернуть фоновое изображение документа:

let img = document.body.style.backgroundImage;

Попробуйте сами »

❮ Предыдущий ❮ Справочник по объектам стиля Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS background-image — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Уровень сложности: Эксперт
  • Последнее обновление: 01 июл, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    Синтаксис:  

     background-image: url('url')|none|initial|inherit;

    Значения свойств:

    • url(‘url’): Указывает URL-адрес изображения. Чтобы указать URL-адрес более чем одного изображения, разделите URL-адреса запятой.
    • нет: Это случай по умолчанию, когда изображение не отображается.
    • начальный: Используется для установки значения свойства по умолчанию.
    • inherit: Он наследует свойство от своего родительского элемента.

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

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

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

    url(‘url’): Когда фоновое изображение имеет URL.

    Синтаксис: 

     background-image: url('url')

    Пример 1: Этот пример иллюстрирует свойство background-image, задав значение url как url.

    HTML

    < html >

    < head >

         < title >background-image property title >

         < стиль >

         body {

             background-image: 1 9 9 1 0    20 }

    H2,

    H4 {

    Цвет: Грин;

    }

    Тело {

    .

         }

         style >

    head >

     

    < body >

         < h2 >GeeksforGeeks H2 >

    < H4 > Справочный образ: URL; H4 >

    . < div >

           GeeksforGeeks: A computer science portal for geeks

         div >

    body >

    HTML >

    Выход:

    Отсутствие: 777. свойство.

    Синтаксис:  

     background-image: url('url') none

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

    HTML

    < html >

    < head >

         < title >background-image property title >

         < style >

         body {

             background-image: url(

    }

    H2,

    H4 {

    0120 цвет: зеленый;

    }

    Тело {

    .

         }

         style >

    head >

     

    < body >

    < H2 > Geksforgeeks H2 >

    . >

    < Div >

    Geeksforgeeeks: портал компьютерных наук для геков

    div >

    body >

    html >

    Output:

    Initial: Устанавливает для свойства значение по умолчанию.

    Синтаксис: 

     background-image: url('url') initial;

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

    HTML

    < html >

    < head >

         < title > Свойство CSS background-image title >

         < style >

     0120 body {

             background-image: url(

         }

          

         h2,

         h4 {

             color : green;

    }

    Тело {

    выравнивание текста: по центру;

         }

         style >

    head >

     

    < body >

    < центр >

             < h2 >GeeksforGeeks h2 >

             < h4 >CSS background-image:url initial; h4 >

        center >

    body >

    html >

    Output:

    Supported Browsers: The browser supported by background-image Property are listed below: 

    • Google Chrome 1.

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

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