Question

在我的网站上，我设置了当前的背景CSS特性：

/* General */   
body {
    background-image: url('../img/background2.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:100% 100%;
    color:#000; /* Font color */
    text-align:justify;
}

它在我的笔记本电脑上很好，但是当我试图访问我的平板电脑（Nexus 7）或我的智能手机（三星Galaxy S3）上的网站时，背景看起来高度拉伸，我的意思是全长页面。

我尝试了媒体查询，但似乎没有任何效果。有什么想法吗？

谢谢！

Answer 1

设置“background-size：100％100％;”仅当设备具有与图像相同的宽高比时才会起作用。它锁定背景的宽度和高度以填充整个屏幕。试试“background-size：cover;”或“background-size：contain;”。有关这些文档的文档可以在here找到。

编辑：请注意，这仅适用于IE9 +，并且您需要在较旧的Android浏览器上使用-webkit-前缀（有关详细信息，请参阅here）。

Answer 2

根据我的经验，背景大小适用于移动浏览器上的像素。

body {
    background-size: 800px 600px;
}

我没有测试过这段代码，但请尝试：

-webkit-background-size: cover;
background-size: cover;

移动设备上的网页背景

2 个答案: