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/