加载时淡出 div 背景

Question

我正在研究加载时淡化 div 背景，我发现了这个例子：jsfiddle 唯一的问题是隐藏整个 DIV 并淡化它，但我只需要淡化 DIV 背景。因此 DIV 及其文本或其中的一些 html 将从头开始显示，其背景会在加载时淡出。

<div style="border: 1px solid #000000;">
<div class="feature">some text and info here</div></div>

Answer 1

您不能只淡化背景 div（因为通过继承，所有子项也会淡化）。但是您可以将设置的 css 属性更改为 "default" 或创建一个 class 仅用于加载目的。

例如：

HTML:

<div id="parent" class="loading">
  <div class="feature">some text and info here</div>
</div>

CSS:

.loading {
  background-color: black;
}

JS:

$(document).ready(() => $('#parent').removeClass('loading'));

Answer 2

绝对将文本放在图像上方，淡入淡出会影响整个事物，因为您的文本在 div 内，您正在淡入淡出。

Fiddle 示例：https://jsfiddle.net/ubgyw1gt/3/

HTML

<div class="container">
  <div class="bgImageContainer"></div>
  <div class="feature"><span>Some text and stuff here</span></div>
</div>

CSS

.feature {
   width:100%;
   background:#fff;
   z-index:100;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }
 .container {
   height: 400px;
   width: 100%;
 }
 .bgImageContainer {
   display: none;
   background-color: white;
   background-image: url("https://placeimg.com/760/460/tech");
   background-size: cover;
   height:400px;
   width: 100%;
   z-index:0;
   position: absolute;
 }

JS

$(document).ready(function(){
    $(".bgImageContainer").fadeIn('slow');
})

加载时淡出 div 背景

fade div background on load

jquery

html

fade