jquery - 切换(显示/隐藏)两个背景 div 中的一个背景，css jquery

Question

我有一个 2 背景 div 排列，A 始终显示在元素内，B 根据其按钮控制单击进行切换。

HTML

<div class="container"></div>

CSS

 .container{
  url(B.png) 10px 10px no-repeat, 
   url(A.png) 600px 10px no-repeat,  
  }

JQUERY

$('.container').on('click', function(){

     //$(this).css("background","A.png")? add/removeClass?
  });

我怎样才能得到这个？

Answer 1

您可以使用background-size来显示/隐藏背景图像之一:

$('.container').on('click', function() {
  $(this).toggleClass('hide');
});

.container {
  width:400px;
  height:200px;
  background-image: 
  url(https://lorempixel.com/300/200/), 
  url(https://lorempixel.com/350/200/);
  background-size: cover;
  background-repeat: no-repeat;
}

.hide {
  background-size: 0 0, cover;
}

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