Javascript 如何在具有背景大小的div上缩放背景图像

我想要一个div元素，它的宽度是33%，背景图像是用css制作的

background-image:url(); background-size:cover 

如何在mouseover或mouseneter上的div中设置背景图像放大动画，是否有插件可以做到这一点？背景div必须使用background size:cover，因为它是一个弹性页面

我还没有一把小提琴，因为我不知道从哪里开始，也不知道如何开始

回答那些想要破解CSS转换缩放以应用于背景尺寸的人：封面

--如果没有，请阅读第二节，了解实现这种效果的标准方法

---

如果你想坚持使用

背景尺寸：封面则必须将整个元素包装在具有固定维度的包装器元素中，并使用
溢出：隐藏并在父元素的
悬停
上缩放子元素


正如您所评论的，对于
img
标记示例，您可以使用
transform:scale（2,2）
以实现这一点，父元素设置为
溢出：隐藏



函数animate（）{
document.getElementById（'a'）.style.WebKittTransitionDuration='1s'；
document.getElementById（'a'）.style.backgroundSize=“200%200%”；
}

您可以为webkit浏览器执行类似的操作

如何让img标记溢出it parent div元素，这样我就可以完成放大效果，因为img不会在it parent div中伸展到它的全宽。你能给我举一个jsFiddle示例说明如何做到这一点吗？例如，谢谢。我现在遇到的问题是，背景图像会拉伸，因为div元素设置为33%，而不是固定宽度，所以您可以做些什么来改变它，使其保持比例。@KDM编辑了我的回答谢谢您的回答，我会给您一个正式的回答，看看我能否让它工作。我唯一的问题是IE11上的动画，当它缩放变换时，它只是猛拉到变换中，知道有什么技巧需要修复吗that@KDM尝试缩放，但chrome会将其放大2倍：）你真的在自己的项目中使用这种方法吗？背景大小设置为
cover
显然意味着需要考虑时间图像的纵横比。建议只使用200%这样的东西至少是很奇怪的。
<div class="wrap">
    <div></div>
    <p>hello</p>
</div>


html, body {
    height: 100%;
}

div.wrap {
    height: 33%;
    width: 33%;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

div {
    height: 200px;
    width: 200px;
    background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover {
    background-size: 150% 150%;
}

div {
    height:300px;
    width: 300px;
    overflow: hidden;
}

div img {
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

div:hover img {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
}

<script>
    function animate(){
        document.getElementById('a').style.webkitTransitionDuration='1s';
        document.getElementById('a').style.backgroundSize="200% 200%";
    }
</script>
<div id="a" onmouseover="animate()" style="width: 200px; height: 70px; border: 1px solid; background: url('http://www.wpclipart.com/food/fruit/apple/apples_4/apple_honeycrisp_small.png') no-repeat;background-size: 100% 100%; ">
</div>