乖兔博客

乖兔 > CMS系统 > CSS > 纯css实现网页background背景图适应浏览器宽度

纯css实现网页background背景图适应浏览器宽度

乖兔 更新于: 2020-12-01 分类:CSS

纯css实现网页background背景图适应浏览器宽度等比例缩放不变形.jpeg

鉴于访客屏幕大小不一,所以一般会将网页的背景图尽量做大开始应大屏幕的浏览效果。但是,这也导致小屏浏览的时候因为无法显示整张图片而导致页面浏览体验变差。

这时候,使用css控制网页背景图随浏览器的宽度而实现自适应,并且将背景图进行等比例缩放,即可实现想要的效果。

纯css实现网页background背景图适应浏览器宽度的代码:

background-size: cover;  //IE9以上
-webkit-background-size: cover; //webkit适用
-moz-background-size: cover; //Firefox
-o-background-size: cover; //Opera

将以上代码追加到定义页面背景的css类里面即可。

打赏