使用动画删除背景图像

Question

我有一个 div 和一个 background-image。单击按钮时，此 image 需要淡出（并在按下另一个按钮时再次淡入）。所以只有 background-image 应该褪色，而不是内容。

如何实现这种效果？我试过jQuery的animate()，但好像不行。我也无法使 CSS 过渡工作，而且 opacity 似乎也使所有内容透明。

Answer 1

我认为让背景图像淡出的唯一方法是将它放在单独的 div 中并淡出：

$('.fade').on('click', function() {
  $('.background').fadeToggle();
});

.container {
  position: relative;
}
.background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(http://lorempixel.com/800/800/city/1/) left top no-repeat;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="background"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id diam ac dolor gravida ultricies. Sed pretium, orci at pharetra placerat, velit mauris posuere mauris, et ornare libero ligula tristique enim. Etiam vitae lobortis erat, ut volutpat ipsum.
  Suspendisse potenti.
</div>
<div class="fade">fade toggle</div>

更新

您可以使用 css 过渡到透明 png：

$('.background').click(function() {
    $(this).toggleClass('blank')
})

.background {
  width: 400px;
  height: 400px;
  background: url(http://lorempixel.com/400/400/city/1/) left top no-repeat;
  transition: background-image 0.5s;
}

.background.blank {
  background: url(http://i.imgur.com/qkeOXbO.png) left top no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">

</div>

Answer 2

所以我会创建一个新的 div 来保存您的背景图片。然后在元素上应用淡入淡出。

我创建了一个fiddle给你看https://jsfiddle.net/bx0dt60a/

下面的 JS 片段

$('#fadeOut').click(function(){
 $('#background').fadeOut(500);
});

$('#fadeIn').click(function(){
 $('#background').fadeIn(500);
});

.container {
  width: 500px;
  height: 500px;
  background-color: red;
}

.background {
  width: 100%;
  height: 100%;
  background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id"container" class="container">
  <div id="background" class="background"></div>
</div>

<div id="fadeOut">
  fade out
</div>
<div id="fadeIn">
  fade in
</div>

使用动画删除背景图像

Removing background image with animation

html

css

jquery

animation

jquery-animate