Question

我一直在四处寻找，但我似乎无法找到关于如何使用CSS慢慢放大背景图像的明确答案。帮助将不胜感激。到目前为止我的代码缩放文本元素而不是背景。

CSS：

body {
    background-image: url("../img/background.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}

Answer 1

我无法按要求扩展身体，我的猜测是用户样式表由于某种原因覆盖了它。但是，作为一种解决方法，您可以像这样使用内部div：

<style>
div {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}
</style>
<body>
	<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>

Answer 2

这是一个简单的工作示例：

Working Example

我们基本上只使用变换：scale;并通过在事件上添加带有jQuery的类来触发更改（我选择在DOM加载时立即触发）。

HTML：

<main id="kb">
    <img src="https://iso.500px.com/wp-content/uploads/2014/08/2048-5.jpg" alt="baby elephants" />
</main>

CSS：

html,
body {
    width:100%;
    height:100%;
}

#kb {
    width:100%;
    height:100%;
    position:relative;
}

#kb img {
    transform-origin: 20% 80%;
    transition: transform 70s linear;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-1024px;
    margin-top:-703px;
}
#kb img.zoom {
    transform: scale(2);
}

JS：

$(document).ready(function(){
    $('#kb > img').addClass('zoom');
});

如果你想提高或降低速度，只需更改＆＃34;过渡＆＃34;在CSS。

背景图像慢放大

2 个答案: