背景图片缩小效果答案

【问题标题】：Background image zoom-out effect背景图片缩小效果
【发布时间】：2016-01-26 18:12:42
【问题描述】：

我想实现网站加载时背景“放大”的效果。文档准备好后，背景图像应逐渐缩小。

我决定为我的背景使用绝对定位元素：

HTML：

<div class="intro">
  <div class="intro_bg"></div>
</div>

CSS：

.intro {
   width: 100vh; height: 95vh;
}

.intro_bg {
    width: 140%;
    height: 140%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    background: url(../images/hills.jpg) no-repeat center center fixed;
    background-size: cover;
}

jQuery :

    $('.intro_bg').animate({
        'width': '100%',
        'height': '100%'
    },20000, function() { alert(); });

基本上，这是行不通的。它成功缩放.intro_bg，但图像似乎没有像预期的那样缩小。图像本身不会缩放或移动（这可能是cover 的全部内容）。

如果我的想法行不通，实现“背景缩小”效果的最佳解决方案是什么？

【问题讨论】：

代码看起来没问题，你检查过 JavaScript 错误吗？
@Anton 是的，代码工作正常，没有错误，但问题是只有 '.intro_bg' 的大小可以缩放/变形。该元素中的背景图像本身始终是静态的（我认为是因为它设置为 cover ）。试图建立一个小提琴......
您需要使用cover。你能给我们一个活生生的例子（或jsfiddle）吗？

标签： jquery css

【解决方案1】：

为什么不在超时时应用带有缩放变换的过渡类（以防止立即应用）？

这具有在功能 (JS) 和表示 (CSS) 之间保持关注点清晰分离的额外优势

Demo Fiddle

HTML

<div class="intro">
    <div class="intro_bg"></div>
</div>

CSS

.intro {
    width: 600px;
    height:600px;
    overflow:hidden;
}
.intro_bg {
    width: 100%;
    height: 100%;
    background: url(http://www.picturesnew.com/media/images/image-background.jpg);
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 4s ease-in;
}
.intro_bg.zout {
    transform:scale(6); /* <--- change the scale of zoom out as appropriate */
}

setTimeout(function(){
    $('.intro_bg').addClass('zout');
},1000);

【讨论】：

您的解决方案作为一个独立的解决方案是完美的，但我刚刚尝试将它放在我的网站上，发现页面可以滚动时出现问题。你可以在这里看到它：albarakadundee.co.uk 介绍部分是第二个“位”。我有点迷茫，只是想知道你能不能快速看一下？
@Juicy - 你可能想申请 overflow:hidden 到 .intro
谢谢，这确实阻止了溢出，但页面上的其他一些图像仍然存在“白斑”。
问题出在固定图像上，出于某种原因
感谢您的回答。我以不同的心态陷入了类似的问题，您的回答帮助我弄清楚如何解决它。如果您需要“放大”，您应该在您的主要 css 规则中使用 scale(1) 并在 .zout 中更新为更高的值，如果您需要“缩小效果”，则使用高于 1 的值在您的主要 css 规则中将其更新为 .zout 类中的 1 个值

【解决方案2】：

您可以尝试将 '%' 替换为 'px'。

$('.intro_bg').animate({
    'width': '100%',
    'height': '100%'
},20000, function() { alert(); });

之后：

$('.intro_bg').animate({
    'width': '100px',
    'height': '100px'
},20000, function() { alert(); });

Jsfiddle

希望有用并有所帮助

【讨论】：

【解决方案3】：

Demo

css

.intro_bg {
    width: 1000px;
    height: 1000px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    position: absolute;
    z-index: -1;
    background: url(http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg) no-repeat center center;
    background-size: cover;
}

【讨论】：