Question

我的页面背景有默认背景颜色和图片。

这是我的代码：

HTML

<body background="https://www.switchbacktravel.com/sites/default/files/images/articles/Hiking%20photo.jpg" class="default-background" style="background-position: center; background-repeat: no-repeat; background-size: cover;">

CSS

.default-background {
  background-color: #17181a;
}

当图片很重，或者用户的网络连接速度变慢时，默认的背景颜色会先出现，而图片会在图片准备加载时显示第二个。

在这种情况下，我希望图片能够顺利淡入，而不是像现在这样粗暴地消失。

这是一个小提琴：https://jsfiddle.net/cg45ygat/

我的目标是实现WeTransfer背景图片显示的结果（或多或少）：www.wetransfer.com

是否有CSS动画方式？

Answer 1

试试这个。

＆＃13;

$(function(){
    var bgimage = new Image();      
    bgimage.src="https://www.switchbacktravel.com/sites/default/files/images/articles/Hiking%20photo.jpg";       
    $(".default-background").hide();     
    $(bgimage).load(function(){
        $(".default-background").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000); 
     }); 
});

＆＃13;

.default-background {
  background-color: #17181a;
  width:100%;
  height:400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="default-background fadeIn">
  </div>
</body>

＆＃13;

Answer 2

你好兄弟希望我的回答能帮到你一些

<body   class="default-background">
<div id="img">
<img id="pre-load" onload="fadeIn(this)" src="https://www.switchbacktravel.com/sites/default/files/images/articles/Hiking%20photo.jpg" style="display:none;" />
</div>
</body>

这是css

.default-background {
 background-color:#333;

 }
 #img{position:absolute;width:100%;height:100%;}

和兄弟在这里是fiddle

CSS淡入背景图像

2 个答案: