html - 如何淡入模态内容而不是背景？

Question

令人惊讶的是，在谷歌上搜索了一下之后，我发现了很多关于如何淡化 div 的背景（不是文本）的问题，但没有一个相反的问题。如果你能找到它，请指给我一个。

我正在寻找一种淡入div内容的方法。例如，我有一个模态，如果我对它应用以下规则：

animation-name: contentfadein;
animation-duration: 1s;

@keyframes contentfadein {
  0% { opacity: 0; }
 100% { opacity: 1; }
}

然后它会淡入所有内容（包括模态背景本身）。

相反，我只想淡入内容，这样模式会立即加载并具有白色背景，但模式的所有内容都会淡入（例如文本、按钮等）

到目前为止，我尝试过的所有方法也会在后台消失，我希望避免这种情况。

我唯一能想到的就是将此规则应用于模态中的每个..单个..项目..，但这会导致数百个单独的规则添加（并且在添加新项目时也会停止工作，直到那个item 是“固定的”），与更好的方法相比，这似乎效率低下。

标签： htmlcss

Answer 1

您可以使用 css 轻松地将规则应用于元素内的所有组件。然后您需要直接在容器内处理文本，您可以将文本的颜色更改为透明。

.container{
  background: red; /* won't fade */
}

.container, .container *{
  transition-duration: 1s;
}

/* This will apply for all content in .container */
.container:hover * {
  opacity: 0;
}

/* OPTIONAL : This will apply for text directly in container */
.container:hover {
  color: transparent;
}

<div class='container'>
  I'm text directly in container
  <p>I'm a paragraphe</p>
  <input type='submit' value="I'm a submit button"/>
  <div>
    <p>I'm in a div and a paragraphe</p>
  </div>
</div>