将transform：scale应用于仅背景图像 [英] Applying transform:scale to just the background image

问题描述

我正在尝试使用transform：scale在具有background-size：cover的div背景图像上实现经典的放大效果。

I am trying to achieve a classy zoom in effect on a div's background image with background-size:cover using transform:scale.

我面临的问题是，随着背景图像的放大，缩放比例似乎扩大了div。

The problem I am facing is that the scale seems to enlarge the div as the background-image zooms in.

是否可以仅将效果应用于背景图像？还是我做错了什么？

Is there a way to only apply the effect to the background image? Or am I doing something wrong?

.despre-noi-image {
  width: 40%;
  height: 500px;
  background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine-evening.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: left;
  background-position-x: 50%;
  background-position-y: 0%;
  -webkit-animation: zoomin 10s linear;
  animation: zoomin 10s linear;
  animation-fill-mode: forwards;
}

@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

<div class="despre-noi-image">
  &nbsp;
</div>
<!-- despre-noi-image -->

推荐答案

CSS非常简单。您可以通过悬停过渡而不是缩放来更改背景大小。

CSS is very simple. You can change background size with a transition on hover instead of scaling.

.despre-noi-image {
    width: 40%;
    height: 500px;
    background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine-evening.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: all .7s;
}
.despre-noi-image:hover {
    transition: all 1s;
    background-size: 110%;
}

这篇关于将transform：scale应用于仅背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！