如何使背景图像在 JS & CSS 中无响应？

Question

我希望我的背景图像的大小与显示器分辨率 (100%) 的大小相同，并且不希望它响应，就像我不希望它在我缩小浏览器的大小时缩小一样，我希望它是当我缩小浏览器的大小时可滚动。 我在编码方面有点新，任何帮助将不胜感激，这就是我所拥有的，谢谢。

.bg {
    background-image: url("pic.png");
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: scroll;
}

Answer 1

你可以用一点 javascript 来做到这一点。为宽度和高度创建 CSS 个变量，并使用 javascript 中的screen.width和screen.height设置它们。

 document.documentElement.style.setProperty('--bg-width', `${screen.width}px`); document.documentElement.style.setProperty('--bg-height', `${screen.height}px`);

 :root { --bg-width: 0; --bg-height: 0; }.bg { width: var(--bg-width); height: var(--bg-height); }

 <img src="https://images.unsplash.com/photo-1630495325532-815f8d91a31e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3300&q=80" alt="" class="bg">

请记住，这种方法不会保留图像的纵横比。 解决此问题的一种方法是仅设置图像的宽度或高度，具体取决于哪个较大。