html - 不确定如何设置背景图像中图像的正确路径

Question

目前我只想将图像作为背景放置到 div 中。我可以通过键入 http://example.com/storage/uploads/icons/heart.png 在我的浏览器中访问图像，但我不确定在我的 background-image 中写什么: url(""); 因为我使用 Laravel 作为后端，所以我不确定默认情况下我在文件夹层次结构中的确切位置。

Answer 1

A) if http://example.com/ is'nt the root of your domain:

background-image: url("http://example.com/storage/uploads/icons/heart.png");

例如:

div {
  width: 100px;
  height: 100px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w");
  background-size: 100% 100%;
}

<div></div>	

B) if http://example.com/ is your domain, so depending on the html file location to the storage folder ,for example: if path storage folder and html file be same,use this:

background-image: url("storage/uploads/icons/heart.png");

C) if path html file is: http://example.com/HtmlFolder/index.html and path image is http://example.com/storage/uploads/icons/heart.png,so use ../ a folder to go back:

background-image: url("../storage/uploads/icons/heart.png");