如何在具有background-size的div上缩放背景图像

小编典典

如何在具有background-size的div上缩放背景图像

css

我想让div元素延伸到33％的宽度，并在CSS中完成背景图片

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

如何在mouseover或mouseneter上对div中的背景图像进行动画处理，是否有可以执行此操作的插件？background
div必须使用background-size：cover，因为它是一个弹性页面。

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

阅读 353

2020-05-16

共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;则必须将整个元素包装在具有固定尺寸的wrapper元素内，overflow: hidden;然后再缩放hover父元素的子元素。

正如您所评论的那样，对于img标记示例，可以使用transform: scale(2,2);将其父元素设置为overflow: hidden;

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

2020-05-16