gpt4 book ai didi

html - 显示图像 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 02:26:39 24 4
gpt4 key购买 nike

我在网页底部显示图像时遇到问题。

这就是我想要的:

Wanted

但是加载图片失败。

这是我的代码:

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>

样式.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;
}

这是层次结构:

hierarchy

控制台没有显示任何错误,这让我想知道我做错了什么?

谢谢!

最佳答案

如果这就是您的全部 CSS,问题是空的 <i>元素没有大小,所以背景图像有一个 0x0 空间可以使用。解决方案:明确地为 i 元素指定图标的大小。

关于html - 显示图像 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37228228/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com