我是网页设计新手。我自己学会了，但我很难理解“CSS”。我正在尝试构建一个简单的网站，我想使用 CSS 插入图像而不是使用 img 标签，但图像没有显示。
它只发生在一张具有透明背景和 300px/300px 的图像上。
我的文件夹目录:
index.html
images (folder)
css (folder)
以上是我元素中的文件。下面是我使用过的代码。
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;
}
最佳答案
#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，应该可以帮助你。
希望对你有帮助，祝你好运!
关于css - 无法通过css应用图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17847274/