Question

我正在加载淡化div背景，我找到了例子：jsfiddle 唯一的问题是如果隐藏整个DIV并淡化它，但我需要褪色只有DIV背景。所以带有文本或内部html的DIV将从头开始显示，其背景在负载时会逐渐消失。

<input type="text" id="buyer_name" list="names" v-model="order.name" class="form-control">
<datalist id="names">
    <option v-for="buyer in buyers" :value="buyer.name" :class="buyer.id"></option>
</datalist>

Answer 1

绝对将文字放在图像顶部，淡入淡出影响整个事物，因为你的文字在你褪色的div里面。

小提琴示例：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');
})

Answer 2

你不能只褪色背景div（因为通过继承，所有的孩子也会褪色）。但是您可以将设置的css属性更改为＆＃34;默认＆＃34;一个或创建一个只是为了加载目的。

一个例子是：

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'));

在加载时淡出div背景

2 个答案: