好的，我有下面的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>marriage</title>
</head>
<body>
<div id="container">
<div id="logo">
<h1><a href="#">marriage logo</a></h1>
</div> <!-- end logo -->
<div id="input">
<input type="text" name="search" id="search" />
<input type="submit" value="search .." />
<p>search for words like: calm, honest ... etc</p>
</div> <!-- end input -->
<div id="questions">
<h2>Why our website ?</h2>
<p>because you find your soulmate as easy as possible, just type the word you looking
for in your soulmate and press enter to start searching</p>
</div> <!-- end questions -->
<div id="side">
<p>New User or signup if not</p>
</div> <!-- end sidebar -->
<div id="footer">
Copyrighted © 2012
</div> <!-- end footer -->
</div> <!-- end of container -->
</body>
</html>
这是样式的 scss 文件，我使用 960 网格系统进行布局
@import "compass";
@import "960/grid";
$ninesixty-columns: 12;
html, body {
@include background-image(linear-gradient(#fcfad0, #FFF));
width: 100%;
height: 100%;
}
#container {
@include grid_container;
#logo {
@include grid(6);
// @include clearfix;
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
text-indent: -9999px;
a {
text-decoration: none;
}
}
}
}
<h1> 中的背景图片标签没有与 html 文件一起显示，我不知道为什么.. 这里缺少什么吗？
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
}
最佳答案
我看到你在使用 Compass。因此，您已经在配置文件中配置了包含图像的目录(即 images_dir)。
不要直接调用你的图像，你应该使用 image-url() helper，像这样(不指定目录图像):
background: image-url(logo.jpg) no-repeat;
另外，如果你想隐藏文本，你可以使用mixin @hide-text .最后，也许是 @replace-text-with-dimensions mixin 就是你想要的:
h1 {
@include replace-text-with-dimensions(logo.jpg, 0, 0);
}
但是，我想您想让 Logo 可点击。在这种情况下，代码将是:
<h1 id="logo"><a href="/">marriage logo</a></h1>
和:
#logo {
a {
@include replace-text-with-dimensions(logo.jpg, 0, 0);
display: block;
}
}
关于html - 背景图片不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10053178/