HTMl制作网页时的背景图如何控制全屏
html网页背景图片如何设置为全屏？简单几行代码，教你容器全屏不占位
操作方法
- 01
首先我们先做一个基本的网页页面
- 02
接着，我们初始化样式，将代码添加在<style></style>标签内 <style type="text/css"> body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a{color:#2d374b;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:collapse;border-spacing:0} p{word-wrap:break-word} </style>
- 03
添加一个div容器，并且命名为bg-box
- 04
接着我们开始设置容器背景，bg.jpg可以替换为你的素材 .bg-box {background:url('bg.jpg');}
- 05
要想背景全屏，那么容器必须全屏,所以我们将bg-box的样式补全。 .bg-box {background:url('bg.jpg');width:100%;height:100%;position:absolute;}
- 06
来预览一下。网页背景已经全屏了
- 07
但是接下来，我们在书写样内容时，并没有内容显示，所以我们还需要，给bg-box 添加一个 z-index:-1 的属性，让其置于页面最底层。就可以了。
- 08
贴一下完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTMl制作网页时的背景图如何控制全屏</title> <style type="text/css"> body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a{color:#2d374b;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:collapse;border-spacing:0} p{word-wrap:break-word} .bg-box {background:url('bg.jpg');width:100%;height:100%;position:absolute;z-index:-1;} </style> <script type="text/javascript"></script> </head> <body> <div class="bg-box"> </div> <div>现在显示的是正文内容。不影响网页</div> </body> </html>