使用 CSS 或 JavaScript 缩放背景图像答案

【问题标题】：Zoom Background Image with CSS or JavaScript使用 CSS 或 JavaScript 缩放背景图像
【发布时间】：2018-07-10 09:42:56
【问题描述】：

我想随着时间的推移缩放我的 div 的背景图像，使其看起来像是在放大和缩小（无需将鼠标悬停在上方 - 我只是在寻找自动启动的动画）。但是，无论我尝试什么，背景动画看起来都不稳定。

如果我将 div 设置为缩放，那么过渡是平滑的，但它会缩放整个 div，而不仅仅是背景图像。有关更多信息，我正在运行最新版本的 Chrome，并且在 Windows 和操作系统上都进行了尝试。你可以在这里看到一个例子：https://jsfiddle.net/sdqv19a0/

 <div class="site-main-banner">

        <div class="caption">
            <!-- Bootstrap -->
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">

                        <!-- figure -->
                        <figure> <img src="images/signature.png" alt="signature"> </figure>
                        <!-- H1 Heading -->
                        <h1 class="typewrite" data-period="2000" data-type='[ "Purposeful design", "Data-driven marketing", "Dynamic branding", "I love it all." ]'> <span class="wrap"></span> </h1>
                        <!-- H2 Heading -->
                        <h2>graphic designer • web designer • analytical marketer</h2>
                        <div class="clearfix"> </div>
                        <!-- Button -->
                        <a href="#" class="theme-btn">view my portfolio</a>

                    </div>
                </div>
            </div>
        </div>

CSS：

.site-main-banner {
float:left;
width:100%;
background:url(https://preview.ibb.co/m8kxST/static_banner_new.jpg) no-repeat center center;
background-attachment:fixed;
background-size:cover;
margin: 0;
padding: 0;
display: block;
clear: both;
position: relative;
text-align:center;
overflow: hidden;
animation: shrink 5s infinite alternate steps(60);
}
@keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
.site-main-banner a.theme-btn {
color: #FFFFFF;
border:#FFFFFF solid 1px;
background:none;
box-shadow:none;
}
.site-main-banner a.theme-btn:hover {
color: #bc6ca7;
border:#FFFFFF solid 1px;
background:#FFFFFF;
box-shadow:none;
}
.site-main-banner .caption {
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%);
padding:300px 0;

}
.site-main-banner figure {
float:left;
width:100%;
text-align:center;
padding:0 0 15px 0;
}

建议？我也对 js 解决方案持开放态度，只是对 javascript 不太满意。谢谢！

【问题讨论】：

How to make zooming only to background image?的可能重复
我查看了这个，并且知道 scale 属性会缩放背景图像和 div 的内容。我最近的尝试是通过动画改变背景大小。我遇到的问题是动画创建了不稳定的、生涩的缩放，而不是平滑的缩放。
向 Chrome 投诉，Firefox 渲染流畅。问题似乎在于他们试图避免抗锯齿，但他们的算法与位置center center 混合只是失败了。请注意，即使此处不相关，如果您想要平滑，您可能希望摆脱 steps。

标签： javascript html css background-image css-transitions

【解决方案1】：

将您的背景分离到主横幅后面的自己的元素中，这样您就可以应用关键帧动画来单独改变背景的比例。

body, html {
  margin: 0;
  padding: 0;
}

.site-space-background {
  position: fixed; height: 100%; width: 100%;
  background: #1A1939 no-repeat center center;
  background-image: url(https://preview.ibb.co/m8kxST/static_banner_new.jpg);
  background-attachment: fixed;
	background-size: cover;
  animation: shrink 5s infinite alternate steps(60);
}

@keyframes shrink {
  0% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1.0)
  }
}

<div class="site-space-background"></div>
<div class="site-main-banner">
    <!-- The rest -->
</div>

【讨论】：

这是正确答案。众所周知，动画背景图像生涩或粗糙
这很完美！我还删除了步骤（60），它很流畅并且运行良好。非常感谢！

【解决方案2】：

我会将 css transform 属性与伪元素结合使用。

.site-main-banner {
    position: relative;
    overflow: hidden;
}

.site-main-banner:after {
    content: “”;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url(...);
    // put your animation here
}

由于我目前正在地铁中使用手机，因此我无法真正向您发送完整的示例，但我希望您能理解。

【讨论】：

谢谢！我试过了，效果很好，但动画仍然很生涩——放大/缩小不流畅。
是的，我忘了告诉你，为 transform: scale() 属性设置动画而不是 background-size。

【解决方案3】：

尝试在您的动画中使用transform: scale([values]);。使用transform 元素非常适合应用缩放动画。看看这个Jsfiddle。我调整了你的一些代码（没有那么多，因为我只编辑了你的 css 动画）。

【讨论】：

你也可以提高动画速度，让它看起来不错。