jquery move background url order in css3 Несколько фоновых изображений?

Я не смог найти что-либо в Google, но возможно ли изменить порядок фона с jquery на hover/click/whatever?jquery move background url order in css3 Несколько фоновых изображений?

т.е. это:

background: 
    url('1st_bg.png') no-repeat center; 
    url('2nd_bg.png') no-repeat center; 
    url('3rd_bg.png') no-repeat center;

в это?

background: 
    url('3rd_bg.png') no-repeat center; 
    url('2nd_bg.png') no-repeat center; 
    url('1st_bg.png') no-repeat center;

используя jquery?

Я не могу показаться, чтобы выяснить, как переместить мой CSS вокруг .. Любая помощь будет очень признателен :-)

источник

2013-11-15 shanling

Посмотрите на это: DEMO

HTML

<body class="image" id="BODY"> 
<button id="changeOrder" style="position:absolute;bottom:100px;left:100px">CHANGE IMAGE ORDER</button> 
</body>

CSS

.image { 
background: url(http://radiantq.com/wp-content/uploads/2011/11/software_box.png) no-repeat 10px 10px, url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/04/Flower-wallpaper-29.jpg) no-repeat 90px 90px, url(http://3.bp.blogspot.com/-kEDW4tNSmpA/UYnb_TbNiqI/AAAAAAAAKlc/MuZ3D0k6xRs/s1600/wallpapers-of-Rose-Flower456.jpg) no-repeat 180px 180px; 
background-size:100px 100px; 
width:500px; 
height: 500px; 
} 
.change { 
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/04/Flower-wallpaper-29.jpg) no-repeat 10px 10px, url(http://radiantq.com/wp-content/uploads/2011/11/software_box.png) no-repeat 90px 90px, url(http://3.bp.blogspot.com/-kEDW4tNSmpA/UYnb_TbNiqI/AAAAAAAAKlc/MuZ3D0k6xRs/s1600/wallpapers-of-Rose-Flower456.jpg) no-repeat 180px 180px; 
background-size:100px 100px; 
width:500px; 
height: 500px; 
}

Jquery SCRIPT

$("#changeOrder").click(function() { 
$('#BODY').addClass('change'); 
});

источник

2013-11-15 07:25:25 Sindhu

jquery move background url order in css3 Несколько фоновых изображений?

ответ

Смежные вопросы