css设置背景图

 

一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。

因此，今天我们将与你分享3种CSS实现背景图图片全屏铺满自适应的方式，希望对你有所帮助。

01

1. margin:0px;

2. background: url(images/bg.png) no-repeat;

3. background-size:100% 100%;

4. background-attachment:fixed;

url(images/beijing.png)——图片路径的位置；

no-repeat—— 图片不重复；

center 0px——center是距离页面左边的定位，0px是距离页面上面的定位；

background-position: center 0——就是图片的定位，同上；

background-size: cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；

min-height: 100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/ window.innerHeight大小。

02

1. background: url("bg.png") no-repeat;

2. height:100%;

3. width:100%;

4. overflow: hidden;

5. background-size:cover;//或者background-size:100%;

03

给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。

css body标签的样式如下：

1. body {

2. /* 加载背景图 */

3. background-image: url(images/bg.jpg);

4. /* 背景图垂直、水平均居中 */

5. background-position: center center;

6. /* 背景图不平铺 */

7. background-repeat: no-repeat;

8. /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */

9. background-attachment: fixed;

10. /* 让背景图基于容器大小伸缩 */

11. background-size: cover;

12. /* 设置背景颜色，背景图加载过程中会显示背景色 */

13. background-color: #464646;

14. }

总结

以上就是我今天与你分享的内容，如果你觉得有帮助，请记得分享给你的朋友，也许能够帮助到他。