最近,在做网页的时候,发现网页的背景图,在手机浏览时候,背景图总是不能居中,靠左显示。在pc端,无论哪个浏览器都可以居中正常显示,但是在手机上面就不正常了,是为啥呢?
先来看代码:
body {
color: #666;
font: 13px/180% MicrosoftYaHei, "微软雅黑";
min-width:1000px;
background:url(../img/body-bg.jpg) repeat-y top center
}
代码,是没有错的,但是为啥会出问题呢?
经过,多方查阅资料;最终得出结果:
background:url(../img/body-bg.jpg) repeat-y top center; 这种简短写法。不能兼容手机,因为手机的执行率没有pc那么高!
于是,我们接着问题,继续说,不能兼容的话,我们使用做原始的写法:
body {
color: #666;
font: 13px/180% MicrosoftYaHei, "微软雅黑";
min-width:1000px;
background:url(../img/body-bg.jpg) repeat-y top center;
background-image:url(../img/body-bg.jpg);
background-repeat:repeat-y;
background-position:center;
}
至此,我们重新在手机上浏览网页,发现,页面背景图可以正常显示了!