Когда было бы нужно использовать img, и когда background-image?

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

.hamburguesa {
  background-image:url(https://i.imgur.com/tbhsHbKh.jpg);
  width:256px;
  height:256px;
  display:inline-block;
}
<img src="https://i.imgur.com/tbhsHbKh.jpg" alt="Hamburguesa" />

<div class="hamburguesa"></div>

Какие преимущества имеет использовать одна на другой? В каких ситуациях было бы нужно использовать img и в каких было бы нужно использовать background-image?

Факторы, которые нужно иметь в виду: usabilidad, доступность, приспособляемость, тип дисплея (экран, принтер, и т.д.).

6
задан 13.07.2017, 03:16
3 ответа

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

IMG

  • Используй IMG если ты стремишься того, чтобы люди напечатали страницу, и желаешь, что изображение, которое было включено по умолчанию.
  • Используй IMGalt) когда у изображения есть важное семантическое значение, такие как значок предупреждения. Он это уверяет, что значение изображения сообщено всем агентам использования, включая лекторат экрана.
  • Используй IMGесли ты хочешь, чтобы браузер показал изображение по отношению к размеру текста.
  • Используй IMGдля многообразных изображений, наложенных в IE6.
  • Использовать IMGвместо background-image смоги улучшать решительно результат оживления на фоне.

CSS background-image

  • Используй CSS background-image если изображение не часть контента.
  • Используй CSS background-image когда изображение заменяет текст
  • Используй CSS background-image если ты стремишься того, чтобы люди напечатали страницу, и не желаешь, что изображение, которое было включено по умолчанию.
  • Используй CSS background-image если необходимо улучшать времена разряда.
  • Используй CSS background-image если необходимо делать видимо одинокий часть изображения.
  • Используй CSS background-image коктейль с CSS background-size:cover чтобы растягивать изображение фона, чтобы покрывать совокупность контейнера (ej div, body, и т.д...).
4
ответ дан 24.11.2019, 13:20
  • 1
    Pod и # 237; схвати помещать шрифт твоего ответа, quiz и # 225; те, кто знают ingl и # 233; s захотите увидеть оригинал: stackoverflow.com/questions/492809/… – blonfu 21.09.2016, 14:45
  • 2
    #191; Podr и # 237; схвати объяснять точку " Использует CSS background-image, когда изображение заменяет текст "? – Alvaro Montoro♦ 21.09.2016, 15:53
  • 3
    Шрифт stackoverflow.com/questions/492809/… я не сделал traducci и # 243; n буквальный, correg и # 237; какие-то точки seg и # 250; n мой собственный опыт. – Marco Sanchez 22.09.2016, 04:33
  • 4
    " Используй CSS background-image, когда изображение заменяет в texto" - Например, если поверил Bot и # 243; n тип < ul> < li> и вместо того, чтобы помещать ему текст pondr и # 225; s изображение, которое представляет Ваш acci и # 243; n, лучше используй CSS background-image. Схвати и # 237; ты манипулируешь твоим bot и # 243; n как единственный объект, adem и # 225; s преимуществ для настройки tama и # 241; или изображения seg и # 250; n Ваш контейнер – Marco Sanchez 22.09.2016, 04:35
  • 5
    Спасибо за помещение первоначального шрифта. В тексте (в комментарий в самом ответе ) кажется, что говорят, что текст держится в ней p и # 225; gina, но он скрывается с CSS (поддерживая ту же структуру и sem и # 225; ntica HTML в ней p и # 225; gina) – Alvaro Montoro♦ 22.09.2016, 05:55

Когда было бы нужно использовать img и когда background-image?

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

Примеры:

  • Обычно используют background-image в div персонажа или изображении, которое они представляли бы предприятие или продукта с коротким описательным текстом.
  • Обычно используют также, чтобы создавать эффект оживления jQuery тип: Fixed Баккгроунд Скрольинг между другими.
  • Обычно используют, чтобы создавать цвет фона с иллюстративным рисунком.

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

Пример background-image:

#image {
  height: 500px;
  max-width: 100%;
  background-image:url(http://www.hrhwalls.com/reimg/image.php?src=http://img.hrhwalls.com/images178/0bdvpx5pom5.jpg&h=900&w=1600);
  background-repeat: no-repeat;
  background-position: 0% 75%;
  background-size: cover;
}
<div id="image"></div>

Преимущество состоит в том, что он приспосабливается к responsive, но избавляется некая часть изображения скрывая верный нежелательный контент меняя ему стоимость background-position важно добавлять это свойство background-size: cover; для Вашего функционирования.

В то время как в изображении img если ты меняешь стоимость height: auto; в один height: 600px; если ты наблюдаешь различие, изменив эту стоимость, уже он не занимает 100 % сайта, и если ты меняешься из-за кистей width чтобы занимать 100 % сайта терялся бы responsive.

img {
  max-width: 100%;
  /*height: auto;*/
  height: 500px;
}
<img src="http://www.hrhwalls.com/reimg/image.php?src=http://img.hrhwalls.com/images178/0bdvpx5pom5.jpg&h=900&w=1600" alt="" />

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

Большая часть сайта использует больше background-image в личном мне нравится использовать больше background-image.

Невыгоды: background-image

Одна из невыгоды background-image дело в том, что не существует позиция кафедральный собор в изображениях. У Porqué изображения фона нет признака alt google и рекомендации кафедрального собора состоит в том, что для позиции кафедральный собор в изображениях состоит в том, чтобы давать ему имя признаку alt="Foro stackoverflow"

Преимущества: img

Дело в том, что, если он обладает позицией кафедральным собором в изображениях с признаком alt="stackoverflow". Это более легкий алтарь находить имя твоего предприятия между больше местом заработай в позиции намного лучший кафедральный собор.

2
ответ дан 24.11.2019, 13:20
  • 1
    #191; В qu и # 233; ты относишься с позицией кафедральный собор в конце ответа? – Alvaro Montoro♦ 21.09.2016, 15:54
  • 2
    @AlvaroMontoro Привет, im и # 225; гены фона у него нет признака alt следовательно у него нет позиции кафедрального собора в im и # 225; гены, названный обычно таким образом s и # 237; tendr и # 225; позиция кафедральный собор <img src="" alt="Mi encontraran en google" /> – Otto 21.09.2016, 16:08
  • 3
    #191; у Тебя fuenta есть для этого? Имей и # 237; в понятный, что Google не s и # 243; он это индексировал из-за alt а tambi и # 233; n из-за контента ее p и # 225; gina в s и # 237; – Alvaro Montoro♦ 21.09.2016, 16:33
  • 4
    @AlvaroMontoro 10 ключей КАФЕДРАЛЬНОГО СОБОРА для im и # 225; гены и то, что комментирует нам Google Имахе Сеарч Por otra parte, если бы Google индексировал весь контент, im и # 225; гены фондов оставаться и # 237; an в фоне vaci и # 243; это не то же самое искать изображение, у которого есть имя, как искание примера alt = и quot; stackoverflow". – Otto 21.09.2016, 16:45
  • 5
    Спасибо! Я буду смотреть ссылки:) – Alvaro Montoro♦ 21.09.2016, 16:58

Используй img , для которого он, aГ±adir изображение буквально.

Использует background-image , когда ты захочешь поместить изображение фона algГєn элемент, как например в div.

Давайте Использовать вещи, для которого они были сделаны :)

1
ответ дан 24.11.2019, 13:20
  • 1
    #191; Цюй и # 233; использовать и # 237; схвати для logo предприятия или веб сайта? и #191; И для значка, что acompa и # 241; в в bot и # 243; n/enlace? и #191; И для banner? и #191; Цюй и # 233; происходи, если в пользу любого мотива лист стилей не грузит? и #191; И если ты хочешь оживить изображение и(или) в и # 241; adir переходы? Она l и # 237; nea между img и background-image может быть мутным в каких-то случаях и небольшом количестве м и # 225; s осложненный, что просто " используй img для одной imagen". Из-за этого правила трех, im и # 225; гены фона tambi и # 233; n они im и # 225; гены, и #191; из-за qu и # 233; не помещать их с img tambi и # 233; n вместо того, чтобы использовать background-image? – Alvaro Montoro♦ 22.09.2016, 05:47
  • 2
    Линия, которая может дифференцировать их, может быть очень тонкой, если, но не нужно забывать для того, чтобы это каждая вещь. Этикетка img seg и # 250; n documentaci и # 243; n html - это, чтобы представлять изображение, и свойство css background-image seg и # 250; n documentaci и # 243; n - это, чтобы устанавливать изображение фона в элементе. Лучший пример это у тебя есть со свойством float, он был использован, чтобы делать responsive сайты, и что ящики были гибкими, но это не был Ваш funci и # 243; n, хотя он был использован, поэтому cre и # 243; flexbox. Гвоздь tambi и # 233; n он пробирается с книгой, но не Ваш истинный funci и # 243; n – Rodrypaladin 22.09.2016, 06:36

Теги

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