<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.big_box{
height: 100vh;
background: url('./three.js-dev/examples/screenshots/webgl_loader_ttf.jpg');
background-size: 100% 100%;
}
</style>
<body>
<div class="big_box">
<!-- 这里面放网页的内容 -->
</div>
</body>
</html>
这里说几个点，需要注意一下：
1、*{
padding: 0;
margin: 0;
}
目的是未来消除游览器默认的边距，让外边距和内边距变成0
2、height: 100vh;是div高度100vh指的是页面窗口的100%。
3、background: url(’./框架文件/three.js-dev/examples/screenshots/webgl_loader_ttf.jpg’);引号里面的是图片的路径，用相对路径或者绝对路径指到你自己搞到的背景图片。
4、background-size: 100% 100%;设置图片的大小，两个100%分别是窗口的宽高占满。如果不设置会默认图片的大小像素，如果图片大小大于窗口大小就会只显示一部分，如果图片小于窗口，会复制多张图片填满窗口。
更多推荐
html如何设置网页的背景图片
发布评论