css背景图片自适应

body {
            background: url(/happytime/img/index.jpg) no-repeat center center fixed; 
            background-size: 100%;//此处要注意,可以填cover也可以填100%。建议填100%
 }

备注:折腾了俩个多小时,才解决一个bug,就在上面标注的那个需注意的地方。background-size是一个css3属性。原本设的置是cover,图片会填充屏幕。但是发现在360极速浏览器下左边会有1像素的白边。按照W3CShool给的值就三种:cover,contain,auto。其实这里可以填像素也可以填百分比。按理说百分比和cover是一个效果,但是在360极速浏览器里,就是差了那么一两个像素,别的浏览器都没问题。
其实准确的说是只有在360极速浏览器的极速模式里才有这个问题。
background-size的两个可选值的含义:contain是让背景图片恰好显示在容器中,图片的外边缘“顶着”容器的内边缘;而cover是覆盖容器,容器的外边缘“顶着”图片的内边缘。

另外,center是让图片居中定位,让图片的中部位于浏览器的中部。fixed使得背景不会跟随滚动条移动。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容