如何缩放具有背景尺寸的div上的背景图像 [英] how do I zoom a background image on a div with background-size

问题描述

我想要一个div元素拉伸到33％的宽度，在css中完成背景图片

I want a div element to stretch across that is 33% width with a background image done in css

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

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

How do I animate a zoom-in of the image of the background in the div on mouseover or mouseneter, is there a plugin that can do this? The background div has to use background-size:cover because it's an elastic page.

我没有一个小提琴，但我不知道在哪里或如何开始

I don't have a fiddle yet cos I don't know where or how to start

推荐答案

回答那些想要黑客CSS转换缩放以应用背景大小：



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

Answer for those who wants to hack CSS transitioning zooming to get applied on background-size: cover;

-- if not, than read the second section for standard ways to achieve such effect

<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; 来过渡/缩放元素）

Demo (Using background-size: cover; to transition/zoom the element)

正如你所说，转换覆盖大小是必要的，所以我想出了你之前在这里我有一个子元素嵌套在 position：relative; 元素，其中子元素设置为 position：absolute; 与 background-image 具有 background-size 设置为 c $ c>，然后在 hover 上，使用 transform：scale（2,2）; property。

As you said that transitioning the cover size is necessary, so I came up with the trick which I had told you previously, here I have a child element nested under position: relative; element where am having the child element set to position: absolute; with background-image having background-size set to cover and then on hover of parent, I zoom in the element using the transform: scale(2,2); property.

此外，使用此解决方案时，一个至关重要的事情是我们需要设置 z-index position：absolute; 元素低于你将放置的元素，因此它将像背景

Also, a crucial thing while working with this solution is that we need to set the z-index of the position: absolute; element lower than what the elements you will be placing inside, so it will act like a background

如果值覆盖，则不能为 background-size 设置动画 px 或％，或者也可以使用 img transform：scale（2,2）;

You cannot animate a background-size if it's value is cover so either you will need px or %, or you can also use an img tag with transform: scale(2,2); property.

演示

演示2 （放大或缩小中心）

Demo 2 (zoom-in or zoom-out from the center)

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 上的子元素。

---

If you want to stick with background-size: cover; than you will have to wrap entire element inside a wrapper element having fixed dimensions with overflow: hidden; and than scale the child element on hover of parent element.

正如你所说，对于 img 标签示例，您可以使用 transform：scale（2,2）; 要实现的父元素设置为 overflow：hidden;

As you commented, for an img tag example, you can use transform: scale(2,2); to achieve that with the parent element set to 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);
}

这篇关于如何缩放具有背景尺寸的div上的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！