Question

我一直在使用这种CSS技术将照片正确地拉伸为背景 - 无论显示尺寸是多少：

html { 
background: url(/images/back.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

但现在我想为我的项目提出一些动议。我已经看到一些网站使用CSS转换来加载文档后慢慢放大背景。不幸的是，正如我注意到它已经完成了img元素，我想坚持我最近的技术。也许有人做过类似的事情或有任何想法吗？谢谢！

Answer 1

据我所知，您只能在数值之间使用CSS转换，因此需要初始background-size: 100%而不是cover。

html {
    background-image: url(/your/background/image/here.jpg);
    background-size: 100%; /* must be a numerical value to transition */
    background-repeat:no-repeat;
    background-position: 50% 50%;
    transition: background-size 2s;
}
.trans {
    background-size: 120%;
}

然后使用JavaScript动态添加trans类以使魔法发生。

http://jsfiddle.net/mblase75/Xd5hz/

Answer 2

下次你应该这样做一个小提琴：jsFiddle

我不确定如何让cover让更大一些 - 但这是在窗口加载时如何做某事的基础知识。我会使用哪些技巧取决于你的反应速度以及图像是什么样的。

CSS

html { 
    background: url(http://placehold.it/1800x1800) no-repeat center center fixed; 
    background-size: 100%;
    transition: all .3s ease-in-out;
}

JS

// When the page is loaded... 
$(window).load( function() {
    // alert('the whole page is loaded');    
    // do stuff here...
});

// on click for example... (page loads too fast... )
$('button').on('click', function() {
    $('html').animate({
        'background-size' : '120%'    
    });   
});

页面准备好后缩放背景照片

2 个答案:

CSS

JS