0

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

   }
4

1 回答 1

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;
  }
}
于 2012-04-07T17:19:22.487 回答