html - 代码/链接失败，背景图片来 self 的电脑

Question

我正在尝试使用照片 (我从中复制了路径)来制作我的背景图像。我之前使用相同的方法添加了一个图像来复制位置并且它正在显示。背景图像:

它在括号中变成蓝色。我是全新的，不知道该怎么做。任何帮助将不胜感激!

#body{
background-image: url(/Users/samanthagaiser/Basic_portfolio/assets/images/dot-grid.png);
}

当我在 cs 代码中“点击链接”时，它会点击到我保存图像的下一个窗口。

Answer 1

将图像、.CSS 文件和 .html 文件复制并粘贴到一个文件夹中。或者，如果您只有 .html 文件，将图像复制到与 .html 相同的文件夹，然后更改:

body{
    background-image: url('./dot-grid.png');
}

图像的路径必须相对于您加载它的文件。

下面的例子:

没有 1。

CSS:   /resources/css/styles.css  
Image: /resources/images/image.jpg

styles.css 中的 CSS:

div { background-image: url('../images/image.jpg');

没有 2.

CSS:   /resources/css/styles.css
Image: /resources/css/image.jpg

styles.css 中的 CSS:

div { background-image: url('./image.jpg');

1. ./ = 在 .css 文件所在的同一文件夹中查找图像。
2. ../ = 在 .css 文件所在的文件夹下查找图像。
3. ../../ = loog for image 两个文件夹下面的 .css 文件是。