如何在背景大小的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);    
}

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

正如你所说过，转换cover大小是必要的，所以我想出了我之前告诉你的技巧，这里我有一个嵌套在position: relative;下的子元素position: relative; 将子元素设置为position: absolute;元素position: absolute; background-image background-size设置为cover ，然后在父母的hover ，我使用transform: scale(2,2);放大元素transform: scale(2,2); 属性。

此外，使用此解决方案时至关重要的是我们需要设置位置的z-index position: absolute; 元素低于你将放置的元素，因此它将像background

---

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

如果它的值是cover ，则无法为background-size设置动画，因此您需要px或% ，或者您也可以使用带有transform: scale(2,2);的img标记transform: scale(2,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); 实现那个父元素设置为overflow: hidden;

演示2

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

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浏览器执行类似的操作。

在这里演示