如何在背景大小的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: absolute;与background-image已经background-size设定cover,然后hover父,我使用transform: scale(2,2);属性放大元素.

此外,使用此解决方案时,一个关键的事情是我们需要z-index将position: absolute;元素设置为低于要放置在内部的元素,因此它将像background

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

你不能动画显示background-size,如果它的价值是cover这样无论是你需要px或者%,或者你也可以使用一个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);
}