所以我有一个<header>
标签,<h1>
里面有一个标签。该<header>
标签有一个 CSS 背景图像,我想使用 CSS 或 jQuery 慢慢淡入。
<header>
<h1>Title</h1>
</header>
这是否可能在不淡入整个<header>
标签的情况下(这也会淡入<h1>
标签?我不想以任何方式修改 HTML。
所以我有一个<header>
标签,<h1>
里面有一个标签。该<header>
标签有一个 CSS 背景图像,我想使用 CSS 或 jQuery 慢慢淡入。
<header>
<h1>Title</h1>
</header>
这是否可能在不淡入整个<header>
标签的情况下(这也会淡入<h1>
标签?我不想以任何方式修改 HTML。
子元素继承其父元素的不透明度。
如果您的背景是一种颜色,您可以background-color
改为为属性设置动画。
如果它不是颜色,您可以将子元素移到动画元素之外,然后使用 CSS 定位,使它们看起来像子元素(或任何与您的设计相匹配的元素)。
我确定您可以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/
但是,您可能希望从另一个图像过渡到最终图像以获得完整效果。这个例子就是这样,以及什么是可能的例子。;)
这是不可能的,因为您<h1>
是子节点。
如果不想修改 HTML,可以使用 jquery 将其<h1>
移出,<header>
然后分别对 header 进行动画处理。
例如:
$('header:first')
.find('h1')
.insertBefore('header:first')
.end()
.fadeIn();
您需要应用 CSS 规则,以便即使它不是子节点也<h1>
能定位在它之上。<header>