背景图片不显示？答案

【问题标题】：background image not showing?背景图片不显示？
【发布时间】：2012-04-08 01:19:22
【问题描述】：

好的，我有以下 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 &copy; 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;

   }

【问题讨论】：

尝试添加display:bock;到 css 中的 h1
仍然没有显示..我在display: block之前尝试过
我知道这很愚蠢，但是，您确定您的图像在正确的位置，文件结尾和大小写正确吗？
我检查了不止一次，我在这里粘贴了完整的html和scss ..我找不到问题...可能是网格布局..我不知道
我们能看到这个的运行代码吗？

标签： html css sass 960.gs

【解决方案1】：

我看到你使用指南针。因此，您已经在配置文件中配置了包含图像的目录（即images_dir）。
而不是直接调用你的图像，你应该使用 image-url() 帮助器，像这样（不指定目录图像）：

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);
}

但是，我想您想让徽标可点击。在这种情况下，代码将是：

<h1 id="logo"><a href="/">marriage logo</a></h1>

和：

#logo {
  a {
    @include replace-text-with-dimensions(logo.jpg, 0, 0);
    display: block;
  }
}

【讨论】：

很好，我不知道这个 mixin .. 谢谢你的帮助 :)