通过CSS而不是HTML5添加图像_Html_Css

通过CSS而不是HTML5添加图像

html css

通过CSS而不是HTML5添加图像,html,css,Html,Css,我希望通过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> <he

我希望通过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>


无标题文件

问题是，当我在浏览器中查看时，我什么也看不到，只看到一个空白页。您能看到我的代码中有什么问题吗？或者有其他解决方案吗？

更改

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

到

另外，在HTML5中，你可以从你的链接标签中省略

type=“text/css”

。

你应该为你的测试站点创建一个文件夹，比如说

mysite

，然后添加一个

images

文件夹和一个

css

文件夹。然后将图像和css文件添加到各自的文件夹中

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

/mysite
  /images
  /css
  index.html

然后你会像这样链接到你的图片：

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

这通常是网站目录的组织方式，因此，如果您创建了一个测试站点，您最好养成这样组织的习惯。同时避免在文件夹和文件名中使用空格。

问题在于图像的路径。它包含一个空格。用引号将URL地址括起来。

URL（“/Users/Macbook/Desktop/test-website/bar.png”）

“我想通过CSS样式表插入一个图像，而不是在HTML中插入一个链接。”有什么特殊原因吗？您是从本地加载页面还是从服务器加载页面？@zachsauier，当路径中有空格时，非常感谢，我将使用此文件夹结构。@bjbear123没问题。让我知道这对你有什么好处。我很想知道为什么我被否决了。任何不需要使用双引号的方法。我想这解决了你的问题的原因是因为你正在链接到计算机上随机位置的文件，而不是根目录中的文件。非常感谢你的帮助，非常感谢，说实话，我不知道为什么有人会投票否决你，认为你只是在帮助，而你解决了我的问题。再次谢谢你，不客气。很乐意帮忙！是的，谢谢这个解决了，谢谢

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