只有背景图片必须在页面加载时淡入

Question

只有背景图片必须在页面加载时淡入

Ste*_*aan 2 html fade background-image css3

我有一个带背景图像的div(箭头).在div中是一些文本,箭头在它下面.我希望div中的文本加载页面,但几秒钟后加载背景图像.

这是我的代码:

.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; }
}?

Run Code Online (Sandbox Code Playgroud)

问题:整个div(文本和背景图像)淡入.有没有办法让背景图像淡入,而不是文本？

谢谢你,Stefaan

Answer 1

Sic*_*ico 5

请尝试以下方法

<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>

Run Code Online (Sandbox Code Playgroud)

我把文本放在div之外,相对于包含div的应用位置和文本的绝对位置.我还给了图像div一些宽度和高度.

希望这可以帮助.

归档时间：	11 年，9 月前
查看次数：	9924 次
最近记录：	11 年，9 月前