使用动画删除背景图像答案

【问题标题】：Removing background image with animation使用动画删除背景图像
【发布时间】：2016-01-26 18:05:20
【问题描述】：

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

我怎样才能达到这个效果？我试过jQuery的animate()，但是好像不行。我也无法让 CSS 过渡正常工作，opacity 似乎也让所有内容都变得透明。

Fiddle

【问题讨论】：

这似乎很容易解决。你能告诉我们你已经拥有什么吗？
您是否尝试过定位与 div 元素关联的背景元素，并结合使用 click() 函数和 fadeOut()（可能还有 fadeIn()）？
@MathBio 我认为我的问题不清楚，我已经澄清了。

标签： jquery html css animation jquery-animate

【解决方案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>

更新

您可以使用过度淡入透明 png 的 css 过渡：

$('.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>

【讨论】：

这也是一个不错的方法，虽然 CSS3 transition 对浏览器的支持较少，所以我更喜欢第一种解决方案。

【解决方案2】：

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

我已经创建了一个小提琴给你看https://jsfiddle.net/bx0dt60a/

JS sn-p 下面

$('#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>

【讨论】：