Question

我有一个带背景图像的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; }
}

问题：整个div（文本和背景图像）淡入。有没有办法让背景图像淡入，而不是文本？

谢谢你，斯特凡

Answer 1

尝试以下

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

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

希望这有帮助。

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

1 个答案: