CSS背景图片自适应大小

  • 内容
  • 相关

一个做后台的写h5前端页面,这不是开国际玩笑吗,还好百度,代码贴出来

background: url(../img/bg.png) no-repeat center center fixed;background-size: cover

 备注:折腾了10分钟,才解决一个bug,就在上面标注的那个需注意的地方。background-size是一个CSS3属性。原本设的置是cover,图片会填充屏幕。但是发现在360极速浏览器下左边会有1像素的白边。按照W3CShool给的值就三种:cover,contain,auto。其实这里可以填像素也可以填百分比。按理说百分比和cover是一个效果,但是在360极速浏览器里,就是差了那么一两个像素,别的浏览器都没问题。

其实准确的说是只有在360极速浏览器的极速模式里才有这个问题。

background-size的两个可选值的含义:contain是让背景图片恰好显示在容器中,图片的外边缘“顶着”容器的内边缘;而cover是覆盖容器,容器的外边缘“顶着”图片的内边缘。

另外,center是让图片居中定位,让图片的中部位于浏览器的中部。fixed使得背景不会跟随滚动条移动。
您阅读这篇文章共花了:  

本文标签:

版权声明:转载请带上版权原创为《星城

解压密码:若设有密码均为:www.xcooo.cn

收录状态:百度已收录点击查看详情

CSS背景图片自适应大小

发表评论

您可以选择匿名评论,保护个人隐私 !

评论

1条评论
  1. avatar

    云南茶网 Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows 7 Windows 7 回复

    不错,涨姿势了,谢谢分享

    云南省昆明市 电信