使用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函数中指定单位。

null

$(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>