用jQuery调整div的背景图像[重复]

Question

我想通过 mousemove 函数调整我的 div (#bg) 背景图像的大小。我在 stackoverflow 上找到了几个“解决方案”，但没有一个是 100% 我想要的。 我尝试添加 h1 以查看 mousemove 是否正常工作。我也试过了 .css('transform', 'scale('+ myMouse/2 +')'); 但当我将鼠标悬停在屏幕的最右侧时，它有时会超出图像的比例。 我需要同时使用 background-size 和 calc() 函数。我想我有语法问题但想不通 编辑：我也试过'background-size': calc(100% '+myMouse/2+')冒号（:)给出语法错误

这是我的 CSS 和 JavaScript 代码；

section #bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg.jpg);
    background-size: 100%;
}


     $(document).ready(function(){
        $(document).mousemove(function(e){
            var myMouse = e.pageX; 
            //$('#myh1').text("value of x is : "+ myMouse + "."); this worked for h1 tag
            $('#bg').css('background-size', 'calc(100% + '+myMouse/2+')'); 
        })
    })

Answer 1

您必须在 css 中的 calc 函数中指定单位。

$(document).ready(function(){
    $(document).mousemove(function(e){
        var myMouse = e.pageX; 
        $('#bg').css('background-size', 'calc(100% + ' + myMouse/2 + 'px)'); 
    })
})

#bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-image: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
    background-size: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>