1

我是网页设计的新手。我是自学的，但我很难理解“CSS”。我正在尝试构建一个简单的网站，如果我想使用 CSS 插入图像而不是使用 img 标签，但图像不显示。

它只发生在一张具有透明背景和 300px/300px 的图像上。

我的文件夹目录：

索引.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

http://jsfiddle.net/PJgCt/

#logo {
width: 300px;
height: 300px;
background: url('http://www.smiley-faces.org/wallpaper/smiley-face-wallpaper-widescreen-001.jpg');
background-size: 100% 100%;  
}

我建议将#logo 本身设为 div，而不是在 a 标签中调用它。您也可以使用 background-size 属性来填充整个宽度/高度。我提供了一个 JS fiddle 应该可以帮助你。

我希望这对你有帮助，祝你好运！

于 2013-07-25T01:23:10.170 回答
0

您必须向块元素 (#logo) 添加宽度和高度才能显示。否则，它是一个空容器，其背景图像位于 width: 0; 高度：0；还添加了一个 display: block; 将标签变成块级元素。

再次显示块是我解决方案的关键。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 回答