Question

我想通过CSS样式表插入图像，而不是在HTML中添加链接。

CSS代码：

#bar {  
width: 100%;
height: 500px;
background: #000 url(/Users/Macbook/Desktop/test website/bar.png) center no-repeat;
background-size: auto 200%;  
}

HTML5代码：

<!doctype html>
   <html>
      <head>
         <meta charset="UTF-8">
         <title>Untitled Document</title>
         <link href="Untitled-3.css" rel="stylesheet" type="text/css">
      </head>
      <body>
         <div id="bar">
         </div>
      </body>
   </html>

问题在于，当我在浏览器中查看此内容时，我什么也看不见，只是一个空白页面。您能否在我的代码中看到任何问题，或者是否有替代解决方案？

Answer 1

更改

background: #000 url(/Users/Macbook/Desktop/test website/bar.png) center no-repeat;

到

background: #000 url("/Users/Macbook/Desktop/test website/bar.png") center no-repeat;

另外，在HTML5中，您可以省略链接代码中的type="text/css"。

Answer 2

您应该只为测试网站创建一个文件夹，比如说mysite，然后添加一个images文件夹和一个css文件夹。然后将您的图像和CSS文件添加到各自的文件夹中。

您的文件夹结构如下所示：

/mysite
  /images
  /css
  index.html

然后你会链接到你的图像：

background: url(../images/bar.png) center no-repeat;

这通常是如何组织网站目录的，所以如果你建立一个测试网站，你也可能养成以这种方式组织它的习惯。并且还要避免文件夹和文件名中的空格。

通过CSS而不是HTML 5添加图像

2 个答案: