html - CSS淡入背景图像

<分区>

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

这是我的代码:

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

当图片很重，或者用户的网络连接速度慢时，默认背景颜色会首先出现，然后是图片，当图片准备好加载时。

在那种情况下，我希望图片能够平滑地淡入淡出，而不是像现在这样粗暴。

这是一个 fiddle :https://jsfiddle.net/cg45ygat/

我的目标是(或多或少)达到WeTransfer背景图片展示的效果:www.wetransfer.com

是否有一种 CSS 动画方法可以做到这一点？

最佳答案

试试这个。

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

关于html - CSS淡入背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47171684/

上一篇：html - 当头部有 CSS 链接时，Firefox 不会阻止渲染 HTML

下一篇：javascript - 限制在两点之间移动 x 轴滚动条

相关文章：

html - 如何垂直对齐按钮

html - 如何删除 CSS 中 <a> 标记最后一个字母的字母间距？

html - 允许调整大小以忽略最大高度？

php - 如何动态更改页眉和页脚？

javascript - jQuery:获取 HTML 表格第四行(仅)的第一列值

java - JSF 不工作 : Select SelectOneMenu And Dynamically Update Other SelectOneMenu With Ajax

html - 为什么 flexbox 在我的内容下方创建未使用的空间？

html - 正确使用 HTML 标题标签

html - Bootstrap 4 radio 验证

HTML-CSS 设计问题