如何在最小化的同时防止背景图像移动？答案

【问题标题】：How To Keep Background Image From Moving While Minimizing?如何在最小化的同时防止背景图像移动？
【发布时间】：2021-08-07 04:25:41
【问题描述】：

我一直在寻找解决方案，但它们仅适用于有人滚动时。但是，我需要一个解决方案，使背景图像在最小化浏览器窗口、剪切它的同时不移动。

全屏

最小化屏幕

当我最小化窗口时，我不希望它随浏览器弯曲。所以在这个例子中，当我最小化时，只会显示来自 'vampire' 的 'va'。

例如：

全屏（显示所有大洲）

最小化屏幕（仅显示部分大陆）

.testing{
  background-image: url('http://via.placeholder.com/1280x720.png?text=vampire');
  background-repeat: no-repeat;
  background-position: 100% ;
  background-attachment: fixed;
  height: 800px;
}

&lt;div class="container-fluid testing"&gt;&lt;/div&gt;

编辑：感谢您的回答，但不是我目前正在寻找的东西（太平洋标准时间 21 年 5 月 17 日下午 4:00）

【问题讨论】：

标签： css bootstrap-4 flexbox

【解决方案1】：

.testing{
    background-image: url('http://via.placeholder.com/1280x720.png?text=vampire');
    background-repeat: no-repeat;
    background-position: 500px;
    background-attachment: fixed;
    height: 800px;
  }

给出的答案很接近，但对于将来遇到此问题的人来说，将 background-position 设置为固定数量的 px。

【讨论】：

【解决方案2】：

试试这个 CSS。

.testing {
       background-image: url('http://via.placeholder.com/1280x720.png?text=vampire');
       background-repeat: no-repeat;
       background-position: 100% ;
       background-attachment: fixed;
       height: 800px;
       background-position: top calc(200px - 20vw) right;
       background-size: 100%;
 }

&lt;div class="container-fluid testing"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

我会给它一个位置0 0，而不是让你的背景图像0 0，这样当你调整窗口大小时它就会保持在那个位置。

.testing{
  background-image: url('http://via.placeholder.com/1280x720.png?text=vampire');
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 800px;
}

&lt;div class="container-fluid testing"&gt;&lt;/div&gt;

【讨论】：