gpt4 book ai didi

css - 背景图像不加载图像,div 没有高度

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

我目前正在使用 Foundation Game Design with HTML5 and JavaScript By Rex van der Spuy 学习 HTML 游戏设计。在定位一章中,有HTML 和CSS 代码创建一个包含三个空div 的div。然后,这 3 个空 div 中的每一个都有一个 background-image 并加载图像。

但是,我似乎没有得到相同的结果。这是我的代码,类似于书中的代码:

<!doctype html>
<html>
<title> Margins and Padding </title>
<style>
#stage{
display: block;
width: 600;
height: 600;
border-style: dotted;
border-width: thin;
}

.content{
width: 100;
height: 100;
float: left;
}

#image1{
background-image: url("1.jpg");
}
#image2{
background-image: url("2.jpg");
}
#image3{
background-image: url("3.jpg");
}
</style>

<body>
<div id="stage">
<div class="content" id="image1"></div>
<div class="content" id="image2"></div>
<div class="content" id="image3"></div>
</div>
</body>
</html>

图像与 HTML 页面位于同一文件夹中。我已经尝试了一些来自网络的东西,但没有什么比在末尾添加一个虚拟 div 更有效 clear: both 并设置父 div 的 overflow 但似乎没有任何效果工作。我得到的只是屏幕顶部的一个空行(父 div)。这本书说图像应该加载(甚至给出打印屏幕)

请告诉我出了什么问题

最佳答案

您缺少宽度和高度的单位。试试这个:

  #stage{
display: block;
width: 600px;
height: 600px;
border-style: dotted;
border-width: thin;
}

.content{
width: 100px;
height: 100px;
float: left;
}

关于css - 背景图像不加载图像,div 没有高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15279887/

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