我有一个 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?
});
我怎样才能得到这个?
最佳答案
您可以使用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>
关于jquery - 切换(显示/隐藏)两个背景 div 中的一个背景,css jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49582714/