固定的背景图像不断移动答案

【问题标题】：Fixed background image keeps on moving固定的背景图像不断移动
【发布时间】：2014-08-19 22:33:09
【问题描述】：

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

我的 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;

它又开始随着浏览器移动了！！

【问题讨论】：

你能用JSFiddle演示吗？

标签： html css background-image

【解决方案1】：

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

移动版

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

桌面版

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

【讨论】：