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

How to make background image stay the same on zoom?

本文关键字：缩放 何使 背景 图像      更新时间：2023-09-26

就像有人放大网页时，它会保持原始图像（如果可以的话，最好是CSS）

我在机身上设置了一个背景图像，并使用background-size: 100%来填充屏幕。这将完成你想要做的事情。我不确定除了身体之外，还会有什么好的方法。

我认为这需要javascript，因为你需要弄清楚视口本身有多大……无论何时视口发生更改，css都无法检测到。。。这就是javascript的用武之地。你应该看看javascript/jquery resize browser事件。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语句可以根据您的背景图像需要进行修改。

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

试试这个：

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

此链接上的其他功能。

相关文章：