html - 背景而非内容的动画效果

Question

我为 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)}

Answer 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 仅在指定static 以外的position 时才会被考虑