Question

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

   }

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

背景图片没有显示？

1 个答案: