我的页面有默认背景颜色和背景图片。
我希望在图像完全加载之前显示默认背景色。只有当图像加载时,它才能淡入。
到目前为止,我已经能够很好地淡入背景图像,但即使没有完全加载图像也会淡入。
我想实现类似于 WeTransfer 的东西
这是我的代码:
HTML
<div id="container-background">
<div id="child-background">
<p>Text</p>
</div> <!--container-background-->
</div> <!-- child-background-->
CSS
#container-background
{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
#child-background
{
background: #17181a;
transition: background 0.7s linear;
-webkit-transition: background 0.7s linear;
height: 100%;
width: 100%;
background-image: url(https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg);"
}
JS
$('#child-background').css('background', 'rgba(255, 255, 255, 0)');
请帮我只在加载时淡入背景图片,在未加载时显示默认背景色。
最佳答案
从 css 中删除背景图像并试试这个:
$('<img/>').attr('src', 'https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg').load(function() {
$('#child-background').css('background-image','url(https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg)');
});
#container-background
{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
#child-background
{
background: #17181a;
transition: background 0.7s linear;
-webkit-transition: background 0.7s linear;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container-background">
<div id="child-background">
<p>Text</p>
</div> <!--container-background-->
</div> <!-- child-background-->
关于javascript - 加载时CSS淡入背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47173702/