Question

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

我希望显示默认背景颜色，直到图像满载为止。只有在加载图像时，它才能淡入。

到目前为止，我已经能够很好地淡化背景图像，但即使没有完全加载，图像也会淡入。

我希望实现与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)');

Fiddle

请仅在加载时帮助我淡入背景图像，当尚未加载时，显示默认背景颜色。

Answer 1

从css中删除背景图片并尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个。

body{
  margin:0;
}
#container-background
{  
  height: 100vh;
  width: 100%;
  background:#000;
}
#child-background
{
  background-color: #17181a;
  background-repeat:no-repeat;
  background-size:cover;
  transition: background 0.7s linear;
  -webkit-transition: background 0.7s linear;
  height: 100vh;
  width: 100%; 
  
}
p{
  margin:0;
}

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

docker run -d -p 4545:8553--name my-container my-image my-command

CSS加载时淡入背景图像

2 个答案: