Question

我对html和CSS非常陌生。我6岁的我最近决定他想成为理发师，所以我决定以此为契机为他练习并创建一个模拟的业务页面。

我似乎无法显示背景图像，但是颜色效果很好。我在Chrome上使用了“检查”工具，但没有找到图片文件。这意味着路径不正确，对吧？

图片路径：/Users/myname/Documents/CaydenCutz/img/barbershop.png

CSS文件路径：/Users/myname/Documents/CaydenCutz/CayStyleSheet.css

我尝试过：

url(/img/barbershop.png⁩⁩);
url(../img/barbershop.png⁩⁩);
url(../../img/barbershop.png⁩⁩);
url(/img/barbershop.png⁩⁩);
url("../../img/barbershop.png⁩⁩");
url("../img/barbershop.png"⁩⁩);
url("/img/barbershop.png"⁩⁩);
url("barbershop.png⁩⁩");
url(barbershop.png⁩⁩);
url(/Users/myname/Documents/CaydenCutz/img/barbershop.png⁩⁩);
url(img/barbershop.png);
url(img/barbershop.png);

图像最初是.jpg，但在天真地认为这会有所帮助之后，我将其转换为.png。

现在的代码：

.header {
  height: 100vh;
  background-image: linear-gradient(
    to bottom left,
    rgba(252, 228, 5, 0.7),
    rgba(242, 199, 15, 0.7)),
    url(/img/barbershop.png⁩⁩);
  background-size: cover;
  background-position: top;

我希望图像会显示在渐变后面，但是我只是得到颜色。我知道解决方案将变得非常简单。但是我现在似乎无法弄清楚。

Answer 1

赋予url()的值必须是相对于CSS文件可解析的URL，或者是绝对URL（例如，外部URL）。因此，假设您具有以下结构：

站点根
- CSS文件夹
  - styles.css
- img文件夹
  - background.png

鉴于url（）可以正确找到文件，您可以使用以下选项之一：

url(../img/background.png)

或

url(/img/background.png)

仅当路径包含空格或其他保留字符时才需要使用引号，但无论如何，您都应避免使用引号。

您可能会发现MDN文档值得一读：

背景：https://developer.mozilla.org/en-US/docs/Web/CSS/background
url（）：https://developer.mozilla.org/en-US/docs/Web/CSS/url

Answer 2

我认为URL中包含一些特殊字符当我复制您的代码时，它会显示（请参阅.png之后）

复制并更改您的图片名称，可以正常使用

height: 100vh;
  background-image: linear-gradient( to bottom left, rgba(252, 228, 5, 0.7), rgba(242, 199, 15, 0.7)), url('img/BG0.png');
  background-size: cover;
  background-position: top;

复制并更改您的图片名称

无法找出背景图片：url（）;

2 个答案: