随着窗口大小减小 CSS 从左侧截取图像答案

【问题标题】：Cut off an image from the left as window size decreases CSS随着窗口大小减小 CSS 从左侧截取图像
【发布时间】：2015-02-18 20:28:23
【问题描述】：

所以，现在，我有一个不随浏览器大小缩放的背景图像，因此，当您缩小浏览器窗口时，它会切断右侧的图像并保持锚定在左侧。有什么办法可以编辑 CSS，使图像的右边缘始终位于浏览器的右边缘，并在窗口缩小时切断左边缘？

使用下面的建议后，我的 CSS 目前如下所示：

.header-container { background: url(/**/) no-repeat; width: 100%; min-width: 1600px; height: 542px; background-attachment: fixed; background-position: top right; }

哪个更接近，但不完全正确。

【问题讨论】：

您使用的是什么浏览器/版本？
你解决过这个问题吗？如果已修复，请发布解决方案或选择答案，以便可以关闭问题。谢谢。

标签： css image background background-image

【解决方案1】：

使用 CSS 更改 background-position

background-position: top right;

我在这里测试过：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position_percent

将代码改为：

<!DOCTYPE html>
<html>
<head>
<style>
body { 
    background-image: url('smiley.gif');
    background-attachment: fixed;
    background-position: top right; 
}
</style>
</head>

<body>
</body>

</html>

【讨论】：

这样不行，随着浏览器缩小，它会粘在右边，这很好，但是一旦浏览器小于图像，它仍然会从右边切掉。
做我做的测试。也许你需要background-attachment: fixed;？
使用固定附件，当浏览器缩小时，图像会缩小，即使我已经硬编码了它的高度，但是当我在 w3schools 页面上执行它时，它的行为是我想要的到。我正在将 CSS 添加到问题中。
我在 JSFiddle 中尝试的一切仍然按照您希望的方式工作...也许尝试使用 background-image 而不是 background？
并添加 background-repeat: no-repeat; 而不是在同一行中？