当前位置: 秋叶网络博客 网络技术 ◊ CSS实现背景图自适应屏幕分辨率宽高

CSS实现背景图自适应屏幕分辨率宽高

作者:秋了秋 发表时间:2015年02月06日

很多人会问到怎么让网页的背景图片自适应屏幕高宽度,因为很多时候如果网页背景图片没有设置自适应的话,在不同分辨率的屏幕上显示的背景会有所不同,分辨率小的时候显示不全,分辨率大的时候又会留有空白,我又不想用小图片平铺满屏幕,那么该如何解决这个棘手的问题?当然用css的background-size就可以了,既简单又实用。用法举例:

body{ 
background:url(http://www.mizuiren.com/img/alone.png) no-repeat
background-size:100% 100%


background-size的取值用法,100% 100%表示宽和高无论多少分辨率都占满屏幕,但这样有时候背景图片就会出现高宽比例不协调,那么我们可以只设置宽度,让高度自适应宽度,只要把高度值去掉就行了,如:background-size:100%;除了使用%,还可以使用固定值,固定背景图片大小,让背景图片高宽都居中显示,如:

body{ 
background:url(http://www.mizuiren.com/img/alone.png) no-repeat center
background-size:100px 100px
不给个演示又说我骗大家~
code代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

注意:ie8及ie8以下的浏览器版本不支持,如果你还在用ie8,你该升级了~

2
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/282.html
目录: 网络技术 | 标签: css | 8937次阅读