无法通过css应用图像答案

【问题标题】：Unable to apply image through css无法通过css应用图像
【发布时间】：2013-08-30 06:41:54
【问题描述】：

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

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

我的文件夹目录：

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

【问题讨论】：

如果你的图片文件夹被称为“imgaes”，而你通过“images”调用它，它自然就不行了！
不，我很抱歉这是一个错字。我的文件夹名称是图像。它适用于所有其他图像，我的意思是当我尝试添加到正文时它确实有效。

标签： css image background

【解决方案1】：

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 应该可以帮助你。

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

【讨论】：

非常感谢。但奇怪的是为什么它不符合我的语法。有什么问题？
我很高兴能帮助你 Mythreya。顺便欢迎光临本站！继续发布很好的问题并展示你的代码，你会喜欢这个网站的！祝您发展顺利！
感谢 matt，感谢您的帮助，但您能解释一下我的语法有什么问题吗？
你能举一个更具体的例子吗？
因此，如果您查看我的 html，我使用了 html5 标头标签并在其中使用了 h1，因为我想使用 css 将该文本放在我的徽标上。但我无法显示图像。你能解释一下我做错了什么吗？我在 html 或 css 或两者中的编码方式是否错误？

【解决方案2】：

您必须为块元素 (#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;
}

【讨论】：

即使我添加了高度和宽度，它也不起作用。我不知道出了什么问题。有什么办法可以分享它的截图吗？