0

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

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

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

4

3 回答 3

1

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

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

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

于 2012-05-29T04:10:38.607 回答
0

我确定您可以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/

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

于 2012-05-29T04:24:39.540 回答
0

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

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

例如:

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

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

于 2012-05-29T04:12:45.980 回答