CSS淡入背景图像[重复]答案

【问题标题】：CSS Fade in background image [duplicate]CSS淡入背景图像[重复]
【发布时间】：2017-11-08 14:44:33
【问题描述】：

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

这是我的代码：

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 动画方式来做到这一点？

【问题讨论】：

一个好方法是使用 JavaScript 检测图像加载并从背景内的元素中删除 .default-background 或使用多个背景层使用渐变，两个停止点相同。跨度>
您找到了解决方案还是仍然需要？

标签： html css

【解决方案1】：

试试这个。

$(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); 
     }); 
});

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

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

【讨论】：

【解决方案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

【讨论】：