当我使用图像作为背景图像时,它仅显示图像的顶部,但不覆盖div。
这是CSS代码:
.background-image {
transform: scale(1.1);
transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
background-position: center center;
// background-repeat: no-repeat;
background-size: cover; // cover did not work.
}
这是它的样子
这就是我想要的样子。这是我将鼠标悬停时的图片。
答案 0 :(得分:-1)
您可以尝试以下方法:
img.background-image {
position: absolute;
left: 0;
object-fit: cover;
width:100%;
height:100%;
transform: scale(1);
}
.bgImage{
position: relative;
height: 300px;
width: 300px;
overflow: hidden;
}
.bgImage:hover img{
transform: scale(1.15);
transition: transform 1s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}
<div class="bgImage">
<img class="background-image" src ="https://dev.santafe.com/wp-content/uploads/2020/05/morrison-mccartney-prince-auction.jpg"/>
</div>