如何让背景图片铺满屏幕

学习笔记 马富天 2016-03-29 15:33:24 78 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

版权归 马富天PHP博客 所有

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

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

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

0

1

上一篇《 CentOS 7.0 下搭建LAMP环境【精品】 》 下一篇《 被 md5() 算法加密的字符串所支持的最大长度 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共3条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多