从两个背景 div、css jquery 中切换 (show/hide) 个背景

Question

我有一个 2 背景 div 排列，A 总是显示在元素内，B 根据其 buttonc 控件点击切换。

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 到 show/hide background-image:

之一

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

Answer 2

如果我没理解错的话，你想将一张图片显示为默认背景，然后切换另一张。

我的想法：

再创建一个cssclassname=extra-background，将Image A放入.container，然后将Image B放入.extra-background.
点击时，toggleClass('extra-background')

$('.container').on('click', function(){
   $(this).toggleClass("extra-background");
});

.container{
 background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Vue.png/215px-Vue.png") #00D no-repeat fixed;
  width:400px;
  height:400px;
}

.extra-background{
 background: url("https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/VueCinemas.svg/1200px-VueCinemas.svg.png") #00D no-repeat fixed;
}

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

从两个背景 div、css jquery 中切换 (show/hide) 个背景

toggling (show/hide) one background out of a two-background div, css jquery

css

jquery

background-image