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

Question

我想要一个 div 元素在 css 中完成的背景图像延伸到 33% 的宽度

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

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

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

Answer 1

为那些想要破解 CSS 过渡缩放以应用于 background-size 的人的答案：cover;

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

<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 上，我使用 transform: scale(2,2); 属性放大元素。

此外，在使用此解决方案时，一个关键的事情是我们需要将position: absolute; 元素的z-index 设置为低于您将在其中放置的元素，因此它的行为类似于background

---

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

如果background-size 的值为cover，则您不能为它设置动画，因此您需要px 或%，或者您也可以使用img 标记和transform: scale(2,2); 属性。

Demo

Demo 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;

Demo 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 浏览器做这样的事情。

Demo Here