1

私はウェブデザインが初めてです。独学で習ったのですが、「CSS」を理解するのがとても難しいです。シンプルなウェブサイトを構築しようとしていますが、img タグを使用するよりも CSS を使用して画像を挿入したいのですが、画像が表示されません。

透明な背景と 300px/300px を持つ 1 つの画像でのみ発生します。

私のフォルダディレクトリ：

index.html

画像（フォルダ）

css（フォルダ）

上記は、私のプロジェクトにあるファイルです。以下は、私が使用した私のコードです。

HTML

<!DOCTYPE html>

<html lang="en">

<head>
  <title>XYZ</title>    
  <meta  charset="utf-8" />

  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/reset.css" />
</head>

<body>

    <header id="main">
      <h1 ><a href="/" id="logo"></a>XYZ</h1>
    </header>

    <nav id="main-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">How it works</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Report bugs</a></li>  
      </ul>
    </nav>

</body>

CSS

/** web-page default stylings **/

body {
background-color: #efefef;
line-height: 17px;
font-family: sans-serif;
}
a{
 text-decoration: none;    
}

/** content styling **/
#logo {
background: url(../images/logo.png) no-repeat;
}
4

2 に答える 2

0

表示するには、ブロック要素 (#logo) に幅と高さを追加する必要があります。それ以外の場合は、背景画像が width: 0 の空のコンテナーです。高さ: 0; また、display: ブロックを追加します。タグをブロック レベル要素に変換します。

繰り返しますが、表示ブロックは私のソリューションの鍵です。http://jsfiddle.net/olwez/T5evL/

html.

<a href="#" id="logo"></a>

CSS

#logo {
    display: block;
    width: 300px;
    height: 300px;
    background: url(../images/logo.png) no-repeat;
}
于 2013-07-25T01:09:24.670 に答える