html - 你能在背景图像中淡入淡出，同时保持孩子的东西可见吗？

Question

所以我有一个<header>标签，<h1>里面有一个标签。该<header>标签有一个 CSS 背景图像，我想使用 CSS 或 jQuery 慢慢淡入。

<header>
    <h1>Title</h1>
</header>

这是否可能在不淡入整个<header>标签的情况下（这也会淡入<h1>标签？我不想以任何方式修改 HTML。

Answer 1

子元素继承其父元素的不透明度。

如果您的背景是一种颜色，您可以background-color改为为属性设置动画。

如果它不是颜色，您可以将子元素移到动画元素之外，然后使用 CSS 定位，使它们看起来像子元素（或任何与您的设计相匹配的元素）。

Answer 2

我确定您可以transition使用以下方法从背景颜色转换为图像：

transition: background 5s linear

因此，例如：

#div {
    -webkit-animation:ani 5s;       
    background: url('http://tinyurl.com/cxnemfx');
}

@-webkit-keyframes ani {
from {background: black;}
to {background: url('http://tinyurl.com/cxnemfx');}
}​

Chrome/Safari 演示：http: //jsfiddle.net/f32RS/1/

但是，您可能希望从另一个图像过渡到最终图像以获得完整效果。这个例子就是这样，以及什么是可能的例子。;)

Answer 3

这是不可能的，因为您<h1>是子节点。

如果不想修改 HTML，可以使用 jquery 将其<h1>移出，<header>然后分别对 header 进行动画处理。

例如：

$('header:first')
    .find('h1')
        .insertBefore('header:first')
        .end()
    .fadeIn();

您需要应用 CSS 规则，以便即使它不是子节点也<h1>能定位在它之上。<header>