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;

また、テキストを非表示にしたい場合は、ミックスイン@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 に答える