CSS淡入背景图片 [英] CSS Fade in background image
问题描述
这是我的代码：
我的网页的背景有一个默认的背景色和一张图片。
HTML
< body background =https://www.switchbacktravel.com/sites/default/files/ images / articles / Hiking％20photo.jpgclass =default-backgroundstyle =background-position：center; background-repeat：no-repeat; background-size：cover;>
CSS
.default-background {
background-color：＃17181a;
$ / code> 当图片很重，或者用户的网络连接速度较慢时，默认背景颜色会首先出现，图片第二，当图片准备好加载时。
在这种情况下，我希望图片能够平滑淡化，而不是残酷地现在是这种情况。
这是一个小提琴： https： //jsfiddle.net/cg45ygat/
我的目标是实现WeTransfer背景图片显示的结果（或多或少）：www.wetransfer.com
有没有一种CSS动画的方式来做到这一点？
你好兄弟希望我的回答能帮助你一些如何
< body class =default-background>
< div id =img>
< img id =pre-loadonload =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％;}
和这里的兄弟是小提琴
The background of my page has a default background color, and a picture.
Here is my code :
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;
}
When the picture is heavy, or the user's internet connection slow, the default background color would appear first, and the picture second, when the picture is ready to load.
In that case, I want the picture to fade in smoothly, not brutally as it is the case now.
Here is a fiddle : https://jsfiddle.net/cg45ygat/
My goal is to achieve the result (more or less) of WeTransfer background picture display : www.wetransfer.com
Is there a CSS animation way of doing this ?
hello brother hope my answer helped you some how
<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>
here is css
.default-background {
background-color:#333;
}
#img{position:absolute;width:100%;height:100%;}
and brother here is fiddle
这篇关于CSS淡入背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
