javascript - 如何使背景图像在缩放时保持不变？

Question

就像当有人放大网页时，它会保留为原始图像（如果可以的话，最好在 CSS 中）

Answer 1

我在身体上设置了一个背景图像，并使用background-size: 100%它来填充屏幕。这将完成您正在尝试做的事情。我不确定除了身体之外的任何元素都会有一个好的方法。

Answer 2

试试这个：

background-size: cover;      
background-attachment: fixed;

此链接上的其他功能。

Answer 3

我认为这需要 javascript，因为您需要弄清楚视口本身有多大...每当该视口发生更改时，css 无法检测到...这就是 javascript 的来源。您应该查看 javascript /jquery 调整浏览器事件大小。jQuery 通过http://api.jquery.com/resize/上的一些示例很好地实现了这一点，您应该可以很容易地使用它们。

他们给出的示例是在调整窗口大小时添加正文的新宽度......这与缩放窗口时的触发器相同。

看看这个jsfiddle。我所做的是首先插入新视口的宽度。然后我还重新调整了框的宽度和高度，使其相对于视口的 1/5。

神奇的代码是：

$(window).resize(function() {
    $('#log').append('<div>' + $(this).width() + '</div>');
});

宽度的变化是：

if (logWidth == width/3) {
    console.log("hooray.");
}
else {
    console.log("resize the log please.");
    logWidth = width/3;
    $('#log').width(logWidth);
}

可以根据您的背景图像需要修改此 if else 语句。

这给了我新的宽度，我可以用它来设置背景图像/宽度/任何我想要的任何调整大小事件的元素。