显示图像CSS
用户名
我在网页底部显示图像时遇到问题。
这就是我要的 ：
但是它无法加载图像。
这是我的代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/style.scss">
<title>Hello World</title>
</head>
<body>
<header class="header">
Mon App de Météo
</header>
<section class="view">
</section>
<nav class="nav">
<a href="#home"><i class="home"></i></a>
<a href="#about"><i class="about"></i></a>
</nav>
</body>
</html>
style.css
.header{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
line-height: 60px;
color: #FFF;
text-transform: uppercase;
text-align: center;
background-color: #11a7ab;
}
.nav{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #4f597b;
}
.home{
background-image: url('../img/icon/home.png');
background-repeat: no-repeat;
}
.about{
background-image: url('../img/icon/about.png');
background-repeat: no-repeat;
}
a{
display: block;
width: 50%;
float: left;
}
这是层次结构：
控制台没有显示任何错误，这使我想知道我做错了什么吗？
谢谢！
李斯特先生
如果这就是您的CSS，那么问题是空<i>元素没有大小，因此背景图像有一个0x0的空间可以使用。解决方案：给i元素明确指定图标的大小。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用CSS显示图像
- 2
CSS拒绝显示图像？
- 3
在图像CSS上显示图像（2）
- 4
CSS-显示的裁剪图像
- 5
使图像显示在链接悬停CSS上
- 6
如何使用CSS仅显示图像的顶部？
- 7
Internet Explorer不显示CSS加载的图像
- 8
使用CSS对中图像（不显示：阻止）
- 9
CSS：背景图像未显示
- 10
通过使用CSS图像显示背景网格
- 11
无法显示静态图像和CSS文件
- 12
如何使图像显示在HTML / CSS中？
- 13
CSS将不会显示背景图像？
- 14
使用CSS3显示图像标题
- 15
IE中不会显示CSS内容图像
- 16
jQuery / CSS在悬停时显示图像
- 17
悬停然后显示时图像消失-CSS
- 18
Internet Explorer不显示CSS加载的图像
- 19
并排显示2张图像（Css）
- 20
在CSS中显示图像和响应式
- 21
Firefox中不会显示背景CSS图像
- 22
不显示本地CSS背景图像
- 23
CSS：图像未在iOS设备上显示
- 24
css单击div时显示完整图像？
- 25
css - 如何显示 100 像素的图像
- 26
图像显示大于 CSS 中设置的尺寸
- 27
CSS：背景图像不显示的div
- 28
背景图像：未在 CSS 中显示
- 29
CSS 内容图像未显示在 Firefox 上
我来说两句