как правильно вставить мою картинку в css?

Question

У меня проблема с вставкой моей картинки, у меня ошибка 404, хотя я думал, что мой путь был правильным.мои файлы:

• главное меню
  • phone.png
  • _menu.scss

в моем файле _menu.scss, у меня есть следующий код:

 .phone {
  background-image: url(phone.png);
}

.phone - это имя моего класса.я работаю с drupal и веткой.

спасибо за вашу помощь и извините за мой английский.

Answer 1

Может быть, вы можете попробовать: ./phone.png.

.phone {
  background: url('./phone.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

Answer 2

извините, но у меня всегда одна и та же проблема: мой код TWIG:

<div class="col-6">
  <div class="phone">
  </div>

и мой код SASS:

.phone {
  background: url('phone.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

и мои файлы тоже всегда одинаковы:

• главное меню
  • phone.png
  • menu.scss

У меня всегда ошибка 404спасибо

Answer 3

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

 .phone {
  background-image: url(phone.png);
  width: 500px;
  height: 600px;
}

<div class="phone"></div>

У меня нет вашего phone.png, но так и должно быть.

Answer 4

Решение

Существует два способа импорта изображения.1. Использование тега HTML.2. Использование CSS background.

При использовании css-версии не забывайте background-size и background-position.

Пример:

.image {
  background: url('path/to/img.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

<img src="path/to/img.png" />

<div class="image"></div>

Answer 5

При добавлении в качестве фона в div необходимо добавить «height» и «width», чтобы фоновое изображение появилось.

оно не отображается:

 .phone {
  background-image: url(https://picsum.photos/300/300);
}

<div class="phone"></div>

но он показывает:

 .phone {
  background-image: url(https://picsum.photos/300/300);
   height:300px;
   width:300px;
}

<div class="phone"></div>