我正在尝试使用 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);
}
}
<div class="despre-noi-image">
</div>
<!-- despre-noi-image -->
最佳答案
CSS非常简单。您可以通过悬停时的过渡而不是缩放来更改背景大小。
.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%;
}
关于html - 应用变换 :scale to just the background image,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47215762/