如何让背景图片铺满屏幕

学习笔记 2016-03-29 15:33:24 21 3

【摘要】有的时候我们需要将背景图片平铺布满整个body页面,并且背景图片不移动。我们需要用到background-size这个属性实现铺满整个body页面

完整代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset='utf-8' />
  5. 		<title>如何让背景图片铺满屏幕</title>		
  6. 		<style type="text/css">
  7. 			*{margin:0;padding:0;}
  8. 			body{			
  9. 				background: url('image/1.jpg') fixed no-repeat;
  10. 				background-size: cover;				
  11. 			}
  12. 			div{width:100px;height:2000px;}
  13. 		</style>
  14. 	</head>
  15. 	<body>
  16. 		<div></div>
  17. 	</body>
  18. </html>

演示地址:

http://mafutian.net/home/article/d/id/20.html

源代码下载地址:

http://mafutian.net/public/home/download/demo/20.zip

版权归 马富天博客 所有

本文标题:《如何让背景图片铺满屏幕》

本文链接地址:http://www.mafutian.net/20.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 CentOS 7.0 下搭建LAMP环境【精品】 》 下一篇《 Jquery实现返回顶部,并且缓慢移动到顶部 》
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码