Question

我有一个背景图片，我想在右上角修复。当我缩小屏幕以查看网站在移动设备上的外观时，图像会移动。我不希望这种情况发生，我不希望它在手机上显示，而是在桌面上显示。

我的CSS ......

body {
    font-family: Gafata;
    background: url("/static/TH1.png");
    background-repeat: no-repeat;
    background-position: right top;
}

所以我将附件更改为固定...

background-attachment: fixed;

但是图像失去了它的位置（向左移动），所以我添加background-position ...

background-attachment: fixed;

然后再次开始使用浏览器!!

Answer 1

如果您希望它在桌面上显示并想要隐藏移动设备，请添加以下css

for Mobile

body {
    font-family: Gafata;
    background: none;
    background-repeat: no-repeat;
    background-position: right top;
  }

for desktop

@media (min-weidth: 768px) {
  body {
    font-family: Gafata;
    background: url("/static/TH1.png");
    background-repeat: no-repeat;
    background-position: right top;
  }
}

固定的背景图像继续移动

1 个答案: