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

我想要一个 div 元素拉伸 33% 宽度，背景图像用 css 完成

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

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

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

对于那些想要破解 CSS 过渡缩放以应用于背景大小的人来说，答案是：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 http://jsfiddle.net/s3hWj/4/ (Using background-size: cover;过渡/缩放元素）

正如你所说，过渡coversize 是必要的，所以我想出了我之前告诉过你的技巧，这里我有一个嵌套在下面的子元素position: relative;子元素设置为的元素position: absolute; with background-image having background-size set to cover然后继续hover父级，我使用放大元素transform: scale(2,2);财产。

此外，使用此解决方案时至关重要的一点是我们需要设置z-index of the position: absolute;元素低于您要放置在其中的元素，因此它的作用就像一个background

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

您不能为background-size如果它的值是cover所以你要么需要px or %，或者您也可以使用img标记为transform: scale(2,2);财产。

Demo http://jsfiddle.net/s3hWj/

Demo 2 http://jsfiddle.net/s3hWj/567/ （从中心放大或缩小）

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 http://jsfiddle.net/s3hWj/3/

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