让一张背景图沾满整个页面

最新推荐文章于 2024-06-17 10:49:59 发布

peepeeman

最新推荐文章于 2024-06-17 10:49:59 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/peepeeman/article/details/106372437

版权

第一种背景图直接用background:#xxx去写的
当你整个页面内容超过屏幕高度时，背景图不会跟随内容变长解决方法：

background-attachment: fixed;

例：

<body>
	<div id="#outside"></div>
</body>
<style>
	# outside{
 	     margin: 0;
 		 padding: 0;
 		 background-color: #333333;
  		 background-attachment: fixed;
  }
  </style>

第二种整个页面就是一张图片
页面的底部会有一个图片出现白边解决方法：

 vertical-align:bottom

例：

<body>
  <div id="selfservice">
  	<img src="../img/selfservice.jpg" alt="">
  </div>
</body>
<style>
	#selfservice{
        margin:0;
        padding: 0;
     }
    #selfservice>img{
        width: 100%;
        vertical-align:bottom
     }
</style>