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

Question

我想要一个div元素在33％宽度上伸展，背景图像在css中完成

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

如何在鼠标悬停或鼠标移动中为div中背景图像的放大设置动画，是否有可以执行此操作的插件？背景div必须使用background-size：cover，因为它是一个弹性页面。

我没有小提琴，但我不知道在哪里或如何开始

Answer 1

为那些想要破解CSS转换缩放以应用于背景大小的人的答案：封面;

- 如果没有，请阅读第二部分，了解实现此类效果的标准方法

<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);    
}

Demo （使用background-size: cover;转换/缩放元素）

正如你所说，转换cover大小是必要的，所以我想出了我之前告诉你的技巧，这里我有一个嵌套在position: relative;元素下的子元素将子元素设置为position: absolute;，background-image background-size设置为cover，然后父级hover，我使用{{1}放大元素} property。

此外，使用此解决方案时最重要的一点是，我们需要将transform: scale(2,2);元素的z-index设置为低于要放入其中的元素，因此它将像position: absolute;

---

为那些想要使用HTML和CSS清理的人提供答案

如果值为background，则无法为background-size设置动画，因此您需要cover或px，或者您还可以使用%代码img属性。

Demo

Demo 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%; } ，你必须将整个元素包装在一个具有background-size: cover;固定尺寸的包装元素中，然后在父元素的overflow: hidden;上缩放子元素

---

正如您所评论的，对于hover代码示例，您可以使用img来实现父元素设置为transform: scale(2,2);

Demo 2

overflow: hidden;

Answer 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>

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

Demo Here