Question

我遇到了一个问题，我正在努力做的就是让我的背景图像保持稳定并保持相同的大小和位置，无论用户分辨率有多大。

我现在拥有的：

#navigator {
    background-image: url('banner.png');
    background-repeat:no-repeat;
    background-position:top-center;

}

提前致谢！

Answer 1

您的意思是background-size吗？

#navigator {
    background-image: url('banner.png');
    background-repeat:no-repeat;
    background-position:top-center;
    background-size: 200pt 300pt;
}

（从http://www.w3schools.com/cssref/css3_pr_background-size.asp开始）

适用于与CSS3兼容的大多数现代浏览器。

Answer 2

您需要了解元视口选项。我一直使用的是target-densitydpi，这是Android特有的。 <meta name="viewport" content="target-densitydpi=device-dpi" />

Answer 3

试试这个，它对我有用，

html, body, <or your div>
 {
    background-image:url("fdkljg.kdf");
    background-size:100%;
    background-repeat:no-repeat;
    top:0px;
    left:0px;
    right:0px;
}

如果这不起作用，请尝试将“background-position”属性设置为居中或左侧。完成代码后，请尝试放大和缩小网页以模拟屏幕分辨率。

背景图像缩放

3 个答案: