设置背景图片随着浏览器缩放保持不变

最新推荐文章于 2025-07-10 11:35:52 发布

触不到的颜色是否叫彩虹

最新推荐文章于 2025-07-10 11:35:52 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_28259083/article/details/78043770

angularjs 专栏收录该内容

23 篇文章

订阅专栏

这篇博客探讨了如何在浏览器缩放时使div背景图片的宽度和高度都能保持不变，目前实现的是宽度不变，但高度会变化。作者提供了设置div高度的代码片段，并表示会后续完善解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片是作为div背景存在的，div的width是100%，height是根据屏幕高度计算的。用这种方法只实现了浏览器缩放背景宽度上保持不变，但是高度变了

background-image: url(../images/bg_1.jpg);
background-size: 100%;
background-repeat: no-repeat;

以下是设置div高度的代码

var changeBg = (function(){
        var count = 0,
            height = (document.body.scrollHeight > document.documentElement.scrollHeight ? document.body.scrollHeight : document.documentElement.scrollHeight) - $(".header").outerHeight() - $(".footer").outerHeight() + 'px',
            $bg = $(".home-bg");

        $bg.css({
            height: height
        });

        if(_searchConfig["catagory"]["indexBackgroundImage"] && _searchConfig["catagory"]["indexBackgroundImage"].length > 0){
            setInterval(function(){
                $bg.css({
                    background: '#425061 url("' + _searchConfig["catagory"]["indexBackgroundImage"][count].properties.imageUrl + '") repeat center',
                    height: height
                });

                count++;

                if(count >= _searchConfig["catagory"]["indexBackgroundImage"].length){
                    count = 0;
                }
            }, 5000);
        }
    })();

先写这么多，有空再来改