Question

我希望在这个网站上找到类似的效果：http://www.august.com.au/

当在这个网站上放大/缩小ctrl +/-时，背景不会改变。只有内容缩放。

我希望能够为我的网站设置背景图像并使其无论屏幕分辨率或缩放选项如何，背景图像始终填满屏幕。

据我所知，您可以使用宽度：100％来填充页面，但我的理解是，这是在页面加载时应用的，如果用户在加载图像后缩放，则不会重新调整大小。

有没有人建议从哪一个开始？我曾尝试在网上搜索信息，但却找不到相关信息。

另外我猜这将使用JavaScript而不是css来实现

Answer 1

This worked for me in chrome, firefox

.someImage {
    width: 7%;
    height: 0;
    padding-bottom: 7%;
    background-image: url('../img/myImage.png');
    background-repeat: no-repeat;
    position: fixed;
    bottom: 5%;
    left: 5%;
    background-size: 100% 100%;
}

Answer 2

原来有一个很好的Jquery插件：

http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

似乎像我预期的那样工作。

防止缩放背景图像

2 个答案: