html - CSS3 : Background URL issues

标签 html css

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>

最佳答案

如果您在您的 css 文件夹中,它正在寻找 css/img/file.jpg。如果您不想使用相对路径,则需要将图像路径更改为 ../img/file.jpg。我建议使用绝对路径,但这取决于您。使用绝对路径,您不必担心是否不小心忘记了省略号。

关于html - CSS3 : Background URL issues,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30037389/

相关文章:

javascript - 有没有办法在 Bootstrap 中将导航栏切换按钮添加为屏幕上的固定按钮?

html - 在某些情况下识别不需要的 div 垂直位移的来源

php - 在 Zend Framework 中更改 header.html 文件会隐藏文本

html - HTML 和 Photoshop 中的 RGB 颜色

javascript - 使用 jQuery 动态地垂直和水平居中 div

html - 统一的 HTML 模板语言

html - 有序列表不适用于 IE7 (<ol><li)

php - 如何 jQuery toggle() 和隐藏切换链接或按钮?

javascript - CSS 菜单均匀间距和大小

html - Bootstrap,使用粘性页脚垂直和水平居中图像