logo标签列表

CSS淡入背景图片

htmlcss
3
我的页面背景有默认的背景颜色和一张图片。
以下是我的代码：
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 动画的方法来实现这个效果？
2
一个好的方法是使用JavaScript来检测图像加载并从背景中的元素中删除.default-background，或者使用多个背景层，其中使用渐变，并且两个停止点都相同。 - evelynhathaway
你找到解决方案了还是还需要帮助？ - Rushabh Sheth
2个回答
0

你好兄弟，希望我的回答在某种程度上对你有所帮助。

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

0

试试这个。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接