Question

我希望我的身体的背景图像放大页面加载。以下是我的代码。

CSS：

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   

}

JQuery的：

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

我试图在页面加载时更改图像的background-size属性。但这不起作用。我做错了什么？

Answer 1

您只需要：

html, body {
    background: url("http://placehold.it/200x200") top center no-repeat;
    animation: animateBg forwards 2s ease-in;
}
@keyframes animateBg{
    from { background-size: 200px; }
    to { background-size: 100%; }
}

注意：图像只是一个占位符，您可以更改它以及animateBg关键帧动画的背景大小属性（以及您需要的任何其他内容）。如果您不了解forwards。

确保花一点时间阅读CSS Animations，非常方便在jQuery和CSS之间选择时首先利用CSS。

让我知道这是否适合你，否则我们可以改进一个更适合你的答案：）

Answer 2

希望这会解析您的查询

只是简单的jquery动画播放

$("body").animate({
    "background-size" : "180px"
},2000);

试试这个实时演示http://jsfiddle.net/g2ef7gc4/25/

Answer 3

试

$("body").animate({
    "background-size", "140%"
},20000, function() { alert(); });

参见background zoom effect

的示例

Answer 4

这里是代码的Jquery函数。有延迟和回调

$(document).ready(function () {
    $('body').animate({ backgroundSize: '135%'
    }, 2000, 'linear', function () {
        console.log("called");
    });

      });

Answer 5

为什么你不在css中制作缩放效果？

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 140%;
    transition: all ease-in 5s;   
}

Answer 6

@sooraj只需像演示一样设置高度和宽度

res.send(obj)

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(//images.visitcanberra.com.au/images/canberra_hero_image.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   
        height:500px;
    width:100%;

}

放大对身体背景的影响

6 个答案: