0

我有带有CSS属性的DIV ：

.box {
    background-image: url(images/img.jpg);
}

我为过渡效果选择了这个库。我想在某些页面上使用缩放效果。缩放元素的典型语法是这样的：

$('.box').mouseover(function() {
    $(this).transition({ scale: 2.2 });
});

上面的代码可以正常工作，但它会使用其中的所有元素缩放整个 DIV。

如何仅缩放背景图像？？？

4

3 回答 3

1

试试这个代码。现在您找到了解决方案。

.list{ width:/*100%*/ 90%; float:left; border-right:3px solid #fff; padding:15px 15px 15px; background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png") no-repeat center center ; position:relative; margin:0 auto 1px; transition: all 0.7s ease 0s; -moz-transform: scale(1.0) !important; -webkit-transform: scale(1.0) !important; -o-transform: scale(1.0) !important; -ms-transform: scale(1.0) !important; transform: scale(1.0) !important; border-bottom:0 !important; height:150px; background-size:100% 100%;}



.list:hover{background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png") no-repeat center center ; transition: all 0.7s ease 0s; background-size:150% 150%;}
<div class="list">try this</div>

于 2016-03-03T09:22:24.087 回答
1

我用 JavaScript 得到了解决方案。

$(document).on("mouseover", ".list", function(){
    $(this).css({"background-size":"150%", "transition":"all 0.5s ease"});
    	}).on("mouseout", ".list", function(){
    $(this).css({"background-size":"100%", "transition":"all 0.5s ease"});
    }); 
.list{ width:/*100%*/ 90%; float:left; padding:15px 15px 15px; background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png") no-repeat center center ;  height:150px; background-size:100% auto; transition:all 0.5s ease 1s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list">
xd
</div>

于 2016-03-04T06:00:58.147 回答
0

试试这个，你得到了解决方案。

.list{ width:/*100%*/ 90%; float:left; /*float:left;*/ border-right:3px solid #fff; padding:15px 15px 15px; background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png"); position:relative; margin:0 auto 1px; transition: all 0.7s ease 0s; -moz-transform: scale(1.0) !important; -webkit-transform: scale(1.0) !important; -o-transform: scale(1.0) !important; -ms-transform: scale(1.0) !important; transform: scale(1.0) !important; border-bottom:0 !important; height:150px;}



.list:hover{background:url("http://cdn.macrumors.com/article-new/2014/09/iphone_6_iphone_6_plus1.png"); transition: all 0.7s ease 0s; -moz-transform: scale(1.04) !important; -webkit-transform: scale(1.04) !important; -o-transform: scale(1.04) !important; -ms-transform: scale(1.04) !important; transform: scale(1.04) !important;}
<div class="list">xd</div>

于 2016-03-03T07:15:33.623 回答