那些遇到过的问题

小编rad*_*zrc的帖子

将变换：缩放应用于背景图像

我正在尝试使用 transform:scale 对具有 background-size:cover 的 div 背景图像实现优雅的放大效果。

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

有没有办法只将效果应用于背景图像？还是我做错了什么？

.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);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="despre-noi-image">
  &nbsp;
</div>
<!-- despre-noi-image -->
Run Code Online (Sandbox Code Playgroud)

html css css-transforms

rad*_*zrc
2017 11-10
5
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

css-transforms ×1

html ×1