【问题标题】：how to insert corretly my picture in css?如何在css中正确插入我的图片？
【发布时间】：2019-05-27 14:58:55
【问题描述】：

我插入图片时遇到问题，出现 404 错误，但我认为我的路径是正确的。我的文件是：

主菜单

电话.png

_menu.scss

在我的文件 _menu.scss 中，我有下一个代码：

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

.phone 是我班级的名称。我使用 drupal 和 twig。

谢谢你的帮助，对不起我的英语。

【问题讨论】：

标签： css image sass path

【解决方案1】：

在 div 中添加为背景时，必须添加“高度”和“宽度”才能显示背景图像。

它没有显示：

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

&lt;div class="phone"&gt;&lt;/div&gt;

但它正在显示：

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

&lt;div class="phone"&gt;&lt;/div&gt;

【讨论】：

感谢您的回复，但即使添加了高度和宽度，它也不起作用:(

【解决方案2】：

如果您的文件树是正确的，那么您需要做的就是添加宽度和长度。您没有告诉浏览器制作手机的高度和宽度，因此它不会显示任何内容。

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

&lt;div class="phone"&gt;&lt;/div&gt;

我没有你的phone.png，但应该是这样的。

【讨论】：

【解决方案3】：

解决方案

导入图片有两种方式。
1. 使用 HTML 标签。
2.使用CSS背景。

使用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>

【讨论】：

谢谢，但即使是这个解决方案，它也不起作用。也许我必须写绝对路径？
图片是和index.html/main.css文件放在同一个文件夹吗？如果是这样，那么您不需要定义路径。否则，尝试使用“../”向后移动，使用“/”向前移动到您的文件夹中。如果有帮助，请告诉我。
在服务器上加载项目时，绝对路径也会出现问题。不是最佳做法。
总是没有。我真的不知道。这两个文件在同一个文件夹中，所以我写了我的代码“img src="phone.png" ...和错误，错误和错误。我不明白
我注意到的另一件事是，在你放在那里的代码中，你说的是：url(phone.png)。它缺少“”。所以试试 url(“phone.png”)。让我知道这是否是问题所在。

【解决方案4】：

对不起，我总是遇到同样的问题：我的树枝代码：

<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;
}

我的文件也总是一样的：

主菜单
- 电话.png
- menu.scss

我总是遇到 404 错误谢谢

【讨论】：

【解决方案5】：

也许你可以试试：./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;
}

【讨论】：