css怎样让背景充满整个屏幕

来源：http://www.cnblogs.com/QianBoy/p/7601171.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>炫酷时钟</title>
  6     <style type="text/css">
  7         body{
  8             height: 100%;color: #51555c;
  9             background: url("./img/bg1.png") no-repeat;
 10                                 /* 背景图垂直、水平均居中 */
 11             background-position: center center;
 12              
 13             /* 背景图不平铺 */
 14             background-repeat: no-repeat;
 15              
 16             /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
 17             background-attachment: fixed;
 18              
 19             /* 让背景图基于容器大小伸缩 */
 20             background-size: cover;
 21              
 22             /* 设置背景颜色，背景图加载过程中会显示背景色 */
 23             background-color: #464646;
 24         }
 25         img{
 26             display: inline-block;
 27             width: 28px;
 28             height: 50px;
 29             margin:0 4px;
 30         }
 31         .main_demo{
 32             width: 910px;
 33             min-height: 600px;
 34             margin:30px auto 0 auto;
 35         }
 36         .main_demo h2{
 37             text-align: center;
 38             padding: 10px;
 39             font-size: 40px;
 40             color: wheat;
 41         }
 42         .clock{
 43             width: 500px;
 44             padding: 40px;
 45             margin:2px auto;
 46         }
 47  
 48         .clock_right{
 49             text-align: right;
 50             margin:4px;
 51         }
 52     </style>
 53 </head>
 54 <body>
 55     <div class="main_demo">
 56         <div align="center">
 57             <h2>Js 炫酷时钟</h2>
 58         </div>
 59         <div class="clock">
 60             <!--10点-->
 61             <img src="" />
 62             <img src="" />
 63             ：
 64             <!--40分-->
 65             <img src="" />
 66             <img src="" />
 67             ：
 68             <!--*秒-->
 69             <img src="" />
 70             <img src="" />
 71             <br />
 72             <div class="clock_right">
 73                 <!--2017年-->
 74                 <img src="" />
 75                 <img src="" />
 76                 <img src="" />
 77                 <img src="" />
 78                 ：
 79                 <!--09月-->
 80                 <img src="" />
 81                 <img src="" />
 82                 ：
 83                 <!--27日-->
 84                 <img src="" />
 85                 <img src="" />
 86             </div>
 87         </div>
 88     </div>
 89  
 90 </body>
 91 <script type="text/javascript">
 92     var imgs = document.getElementsByTagName('img');
 93     setInterval(getTime,1000);
 94  
 95     function getTime(){
 96         var _date = new Date();
 97         var year = _date.getFullYear();
 98         var month = _date.getMonth()+1;
 99         var day = _date.getDate();
100         var hour = _date.getHours();
101         var minutes = _date.getMinutes();
102         var second = _date.getSeconds();
103         var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day)
104             ;
105         console.log(newDate.length);
106         for(var i = 0;i < newDate.length;i++){
107             imgs[i].src = 'img/time_' + newDate[i] + '.png';
108         }
109     }
110  
111     getTime();
112  
113     function addZero(num){
114         if(num < 10){
115             num = "0" + num;
116         }
117         return num
118     }
119 </script>
120 </html>

相关阅读:
laravel中使用include和component方法中的一点小区别
 【解决】Converting circular structure to JSON
NUXT中使用axios，自己项目测试记录
 iPhone“连到系统上的设备没有发挥作用”原因分析及解决方法 20200105
vue-touch不能上下滑动的问题【解决】
动态加载swiper,默认显示最后一个swiper-slide怎么办
 CentOS 7 修改开机等待时间
 使用IIS管理器搭建FTP服务器以及其启用虚拟主机名
 织梦后台删除子栏目不成功的解决方法
 去除织梦标签[field:image/]所产生的宽高
原文地址：https://www.cnblogs.com/huashanqingzhu/p/8572724.html