Question

您好我正试图通过使用所有CSS尽可能将背景图片淡入我的网站。当用户访问主页时，我希望图像淡入。我遇到了问题，除非我必须添加jquery或javascript来执行此操作。这是我的代码：

<!doctype html>
<html>
<head>
<title>Paradox Entertainment</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">



body {
    margin:0;
    font-family:arial,helvetica,sans-serif;

    background-image:url("images/2_petski.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-color:#000000;
    color: #ffffff;
    padding: 350px;


}

ul { 
        list-style: none 

 }



</style> 

</head>


<body>






</body>
</html>

如果我能获得任何类型的资源或代码帮助，请提前感谢您。

Answer 1

使用相同的代码，我猜您可以在 Pure CSS 中执行此操作。以下小提琴适合您吗？您可以使用计时功能来更改延迟。目前是4秒。

.fadeImage {
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
    display: block;
    margin: 25px auto;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

 <img src="http://lorempixel.com/400/200/" alt="Image" class="fadeImage" />

如何在页面加载时使用css使背景图像淡入？

1 个答案: