Question

我是网页设计新手。我自己学会了，但我很难理解“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;
}

Answer 1

您必须向块元素（#logo）添加宽度和高度才能显示。否则它是一个空容器，背景图像的宽度为0：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;
}

Answer 2

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小提琴。

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

无法通过CSS应用图像

2 个答案: