如何使用外部 css 作为 gedit 的背景图片

Question

我正在拍摄一些关于 HTML 和 CSS 的类但我真的很难理解如何使用外部 css 制作背景图片.我在外部 css 以其他方式取得了成功，只是不是背景图片。

这是我的代码 HTML:

 <!DOCTYPE html>
    <html lang="en">
    <head>

    <title>Forms</title>
   <link rel="stylesheet" type="text/css" href="/CSS/forms.css">
   </head>
   <body>
   <div id="Pictures"</div>
   </body>
   </html>

这是我的 CSS:

代码

#Pictures {
    background-image:url(../home/brian/Desktop/Becky.JPG);
}

我可以使用 <style> 标签使它工作，但不能使用外部 CSS。

Answer 1

文件结构是关键。 .html 文件相对于 .jpg 文件位于何处？

我建议您使用另一个文件夹（称之为 'assets' 或 'images' 之类的东西）来放入您的图像，而不是将它们放在您的桌面上。
因此，在您的情况下，您的文件结构将如下所示：

index.html
css/forms.css
assets/Becky.jpg

您的外部 css 文件中的路径将是：

#Pictures {
  background-image: url(../assets/Becky.jpg);
}

Answer 2

#pictures {
  background: url("http://www.w3schools.com/cssref/img_flwr.gif");
  background-size: 80px 60px;
  background-repeat: no-repeat;
  padding-top: 40px;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Forms</title>
  <link rel="stylesheet" type="text/css" href="/home/red/Desktop/Web Projects/Test/style.css">
</head>

<body>
  <div id="pictures"></div>
</body>

</html>

如何使用外部 css 作为 gedit 的背景图片

How to use external css for a background image with gedit

css

background-image