只有背景图片必须在页面加载时淡入 [英] Only background image has to fade in on page load
本文介绍了只有背景图片必须在页面加载时淡入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带背景图片的div（一个箭头）。在div中是一些文本，箭头在它下面。我希望div内的文本加载页面，但几秒钟后加载背景图片。
这是我的代码：
.homearrow {
背景：网址（http://www.stefaanoyen.be/wp-content/uploads/2013/03/arrow。 png）no-repeat 200px 155px;
background-size：125px 125px;
float：left;
-webkit-animation：fadein 4s; / * Safari和Chrome * /
-moz-animation：fadein 4s; / * Firefox * /
-ms-animation：fadein 4s; / * Internet Explorer * /
-o-animation：fadein 4s; / * Opera * /
动画：fadein 4s;
}
@keyframes fadein {
from {opacity：0; }
到{opacity：1; } {
}
/ * Firefox * /
@ -moz-keyframes fadein {
from {opacity：0; }
到{opacity：1; }
}
/ * Safari和Chrome * /
@ -webkit-keyframes fadein {
from {opacity：0; }
到{opacity：1; } {
}
/ * Internet Explorer * /
@ -ms-keyframes fadein {
from {opacity：0; }
到{opacity：1; } {
}
/ * Opera * /
@ -o-keyframes fadein {
from {opacity：0; }
到{opacity：1; }
}
问题：整个div（文本和背景图像）淡入。
谢谢，
Stefaan
< html>
< head>
< style>
.wrapper {position：relative; margin：15px 15px 15px 15px;}
.homearrow {
background：#fff url（'arrow.png'）0px 0px no-repeat;
background-size：125px 125px;
float：left;
-webkit-animation：fadein 4s; / * Safari和Chrome * /
-moz-animation：fadein 4s; / * Firefox * /
-ms-animation：fadein 4s; / * Internet Explorer * /
-o-animation：fadein 4s; / * Opera * /
动画：fadein 4s;
height：125px;
width：125px;
位置：绝对; top：0px; left：0px;
}
.homearrowtext {position：absolute;顶部：10px; left：10px; }
@keyframes fadein {
from {opacity：0; }
到{opacity：1; } {
}
/ * Firefox * /
@ -moz-keyframes fadein {
from {opacity：0; }
到{opacity：1; }
}
/ * Safari和Chrome * /
@ -webkit-keyframes fadein {
from {opacity：0; }
到{opacity：1; } {
}
/ * Internet Explorer * /
@ -ms-keyframes fadein {
from {opacity：0; }
到{opacity：1; } {
}
/ * Opera * /
@ -o-keyframes fadein {
from {opacity：0; }
到{opacity：1; }
}
< / style>
< / head>
< body>
< div class =wrapper>
< div class =homearrow>< / div>
< p class =homearrowtext> Hello World< / p>
< / div>
< / body>
我把文本放在div的外面，相对于包含div的应用位置，对文本的绝对位置。我也给了图像div一些宽度和高度。
希望这有助于。
I have a div with a background image (an arrow). In the div is some text, the arrow is below it. I want the text inside the div to load with the page, but the background image load a few seconds later.
This is my code:
.homearrow {
background: url(http://www.stefaanoyen.be/wp-content/uploads/2013/03/arrow.png) no-repeat 200px 155px;
background-size: 125px 125px;
float: left;
-webkit-animation: fadein 4s; /* Safari and Chrome */
-moz-animation: fadein 4s; /* Firefox */
-ms-animation: fadein 4s; /* Internet Explorer */
-o-animation: fadein 4s; /* Opera */
animation: fadein 4s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
The problem: the whole div (text and background image) fades in. Is there a way to make the background image fade in, not the text?
Thank you, Stefaan
解决方案
Try the following
<html>
<head>
<style>
.wrapper {position: relative; margin: 15px 15px 15px 15px ;}
.homearrow {
background: #fff url('arrow.png') 0px 0px no-repeat ;
background-size: 125px 125px;
float: left;
-webkit-animation: fadein 4s; /* Safari and Chrome */
-moz-animation: fadein 4s; /* Firefox */
-ms-animation: fadein 4s; /* Internet Explorer */
-o-animation: fadein 4s; /* Opera */
animation: fadein 4s;
height: 125px;
width: 125px;
position: absolute; top: 0px; left: 0px;
}
.homearrowtext {position: absolute; top: 10px; left: 10px; }
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="wrapper">
<div class="homearrow"></div>
<p class="homearrowtext">Hello World</p>
</div>
</body>
I have put the text outside the div, applied position relative to the containing div and position absolute to the text. I have also given the image div some width and height.
Hope this helps.
这篇关于只有背景图片必须在页面加载时淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
