Question

我想为我的网页提供所有元素的背景，因此将其添加到CSS文件中：

body {
    background: url("../img/pic.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

它可以在Web浏览器上正常工作。背景图像固定在位置上，并且在滚动时，仅body标签中的元素移动，而图片不移动。

但不适用于手机...当我在手机上打开该手机时，会显示相同的背景图片，但放大了几次，它的大小无法很好地缩放，就像我缩小网络时一样我的PC上的浏览器以在较小的屏幕上查看预览。

我尝试了几张图片，更大，更小，不同的比例，但没有任何帮助。我什至加了

@media screen and (max-width: 479px) {
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}}

所以我可以在移动设备上显示一张特殊的图片，但是无论我选择/上传哪张图片，该缩放都会使它失真。

我正在使用引导程序并且仍在学习。我有一些模板使用的库存文件，但在其中使用它们进行搜索，希望找到可以覆盖我自己的CSS并放大图像但找不到图片的CSS。嘿

Answer 1

在电话上固定的后台工作在许多OS上都不好。所以试试这个：

background-attachment: initial;

或使用body：设置背景。更多解决方案在这里： background: fixed no repeat not working on mobile

Answer 2

尝试以下解决方案：

@media(max-width: 767px)  {
  body {
    background-size: 100%;
    background-attachment: initial;
    background-position: center;
    background-repeat: no-repeat;
  }
}

您的问题大概是在@media标签的声明中。应该是@media(max-width: 767px)。

背景图片在手机上显示异常

2 个答案: