背景动画效果但不是内容

【问题标题】：Animate effect for background but not content背景动画效果但不是内容
【发布时间】：2018-01-16 12:25:24
【问题描述】：

我为background 制作了完整的width 和height，动画慢慢地变成了zoom in。问题是，无论我在这个背景上放什么，它都会放大。我试图制作相反的动画来平衡效果，但这不是很干净的解决方案。你知道任何只为背景设置动画的好方法吗？

<header class="header">
    <div class="header-text">
        <h1>Welcome to the Milky Way</h1>
    </div>
</header>

*{
padding: 0;
margin: 0;
box-sizing: border-box;

html, body{
height: 100%;
overflow: hidden;

.header{
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
width: 100%;
background-color: #333;
background:linear-gradient(
  rgba(0, 0, 0, 0.5), 
  rgba(0, 0, 0, 0.5)
),url('bg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation-name: bg;

.header-text{
color: white;
animation-name: bg-text;

.header, .header-text{
animation-duration: 60s;
animation-timing-function: linear;
animation-fill-mode: forwards;

@keyframes bg{
0%{transform: scale(1)}
100%{transform: scale(1.5)}

@keyframes bg-text{
0%{transform: scale(1)}
100%{transform: scale(0.666)}

【问题讨论】：

标签： html css animation scale

【解决方案1】：

所以你需要做的是使用伪元素或标题的直接子元素，如下所示：

<header class="header">
  <div class="header-background"></div>
  <div class="header-text">
    <h1>Welcome to the Milky Way</h1>
  </div>
</header>

然后将背景和动画移动到.header-background

您还需要提供.header:

position: relative;

和.header-background:

position: absolute;
height: 100%;
width: 100%;
z-index: 0;

和.header-text:

position: relative;
z-index: 1;

所以 header-background 填充了整个背景并位于内容的后面。

注意： z-index 仅在指定 position 而非 static 时才考虑

【讨论】：

@MateuszJuruś 真棒:)