乖兔博客

善用佳软~
放飞你的工作效率
乖兔 > CMS系统 > CSS > 纯css实现网页background背景图适应浏览器宽度

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

乖兔 更新于: 2020-12-01 分类:CSS 评论 ( 0 )

纯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类里面即可。

打赏

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!