Question

所以我有一个<header>标记，其中包含<h1>标记。 <header>标签有一个CSS背景图片，我想用CSS或jQuery慢慢淡入。

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

这是否可能不会淡化整个<header>标记（也会淡化<h1>标记？我不想以任何方式修改HTML。

Answer 1

儿童元素继承了父母的不透明度。

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

如果它不是一种颜色，你可以将孩子移到动画元素之外，然后用CSS定位，使它们看起来像孩子（或任何符合你设计的东西）。

Answer 2

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

如果您不想修改HTML，可以使用jquery将<h1>移出<header>，然后单独设置标题动画。

e.g。有类似的东西：

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

您需要应用CSS规则，以便<h1>位于<header>上方，即使它不是子节点。

Answer 3

我确信您可以使用以下方法从背景颜色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/

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

你可以淡化背景图像，同时保持儿童的东西可见吗？

3 个答案: