图片未加载 CSS

Question

我参考了几个不同的堆栈溢出问题，并尝试了与我相似的解决方案，但我似乎找不到答案。为什么图片加载不出来？

我试过在 class 标签和 body 标签中使用它们。我试过前后斜杠。我试过清除我的缓存。我尝试为高度宽度和包含添加额外的规则。都无济于事。我也尝试过本地和 pixabay urls。背景图像：图像（'../img/eye.jpg'）; 背景图片：url("img/eye.jpg");

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles\styles.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Front Page</h1>      
    </div>    
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 auto;
  width: 1000px;
}

.img-eye {
  background-image: url("https://pixabay.com/photos/dog-bathing-sea-waves-portrait-4565646/");
  background-size: 100%;
  height: 200px;
  width: 300px;
}

body {
  background-image: image('../img/eye.jpg');
  background-color: #000;
}

没有任何错误消息。该死的东西是死锅。代码也在 js fiddle 上。 https://jsfiddle.net/greenthingsjump/htq4os9c/1/

Answer 1

您需要引用带有图片扩展名（jpg、png、svg）的图片 url。您正在引用带有嵌入图像的页面。尝试更改正文样式以包括此 url:

https://cdn.pixabay.com/photo/2019/10/21/10/04/dog-4565646_1280.jpg

你也没有使用你的 img-eye class，以防你没有意识到。

Answer 2

您没有在 html 中引用 "img-eye" class。另外，请确保您为图片位置使用了正确的路径

Answer 3

这是使用正确的相对路径和记住使用引用的 class 的组合。你们搞定了。谢谢！

图片未加载 CSS

Image not loading with CSS

css

image

external