0

下午好，我是网页设计新手。我在我的网页中添加了背景图片。我使用下面的 CSS 来实现这一点：

body {
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    height: 100%;
    background-image: url(link.jpg);
   }

在台式机和平板设备上都很好。然而，在手机上，并非所有内容都显示出来。我有移动设备的特定图像，但我不想使用它，因为像素质量损失太多。我想使用相同的图像，但它没有正确缩小。

我已经尝试为移动设备添加媒体查询，并添加背景大小：包含。然后图像在宽度上缩小，但没有覆盖整个背景。所以这也无济于事。

我能做些什么来解决这个问题？

谢谢你。

4

2 回答 2

1

这是在纵向屏幕上使用横向图像时的正常行为。你唯一能做的就是，你已经尝试过的。为不同的屏幕分辨率添加一些媒体查询，以您认为最好的方式调整您的图像。

适合您的情况的一个想法：如果您向网站添加页眉和页脚，则应该可以完全按照您的意愿显示背景图像。

于 2021-01-29T15:14:53.370 回答
0

如果你对拉伸图像没问题，那么你可以使用，

背景尺寸：100% 100%；

于 2021-01-30T07:51:39.150 回答