问CSS3:后台网址问题
EN

Stack Overflow用户

提问于 2015-05-05 02:31:36

回答 2查看 34关注 0票数 0

未显示div的背景img。使用FireFox开发工具，并显示无法加载图像。但是，如果我使用img标记链接到图像，它可以很好地工作。我宁愿使用background属性在css中显示图像。对于我的文件结构，我将img，css和js文件夹嵌套在我的项目文件夹中。当我在一个css文件夹中尝试链接到另一个文件夹中的文件时，路径是否有问题？

@charset "utf-8";
/* CSS Document */

.container {
		
}
.hero {
	background: url('img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
	text-align: center;
	background-size: cover;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>

<body>
   <div class="container">
      <div class="hero">
         <h1> This is a test</h1>
      </div>
   </div>
</body>
</html>

html

css

回答 2

Stack Overflow用户

发布于 2015-05-05 02:35:23

如果你在css文件夹中，它会查找css/img/file.jpg。如果您不想保留相对路径，则需要将图像路径更改为../img/file.jpg。我建议使用绝对路径，但这取决于您。有了绝对路径，你就不必担心如果你不小心忘记了省略号。

票数 0

Stack Overflow用户

发布于 2015-05-05 02:35:16

试试"..“要在文档树中上移

.hero {
    background: url('../img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
    text-align: center;
    background-size: cover;
}

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30037389

复制

相似问题

问CSS3:后台网址问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3:后台网址问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3:后台网址问题
EN