Question

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

如何实现这种效果？我尝试过jQuery的animate()，但这似乎不起作用。我也无法让CSS过渡工作，opacity似乎也使所有内容都透明。

Answer 1

我认为你能够淡化背景图像的唯一方法就是把它放在一个单独的div中并淡化：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

<强>更新

你可以使用css过渡淡出透明的png：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

所以我会创建一个包含背景图像的新div。然后在元素上应用淡入淡出。

我为你创造了一个小提琴https://jsfiddle.net/bx0dt60a/

下面的JS片段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

用动画删除背景图像

2 个答案: