Question

我正在尝试在鼠标悬停时实现图像悬停。我有一个具有背景图像的div。在该div上的mouseover上，背景图像将翻转。但是我面临的问题是，当图像翻转时，图像随之移动。例如，当我将鼠标悬停在div上时，实际高度为217px的图像将变为157px；在降低div的高度的同时，图像实际上在向上移动，我不希望图像在翻转效果时向上移动。我该如何避免这种情况。

我尝试使用background-position:fixed属性，但这有点给视差效果

这是我所做的。

    .img-holder{
    	height:217px;
    	width:543px;
    	background:#dedede;
    	position:relative;
    
    }
    .bg-img{
    	position: absolute;
        height: 100%;
        width: 100%;
        content: "";
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        -webkit-transform: scale(1);
        transform: scale(1);
        position: absolute;
        -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
        transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
        background-size: cover;
        -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    }
    
    
    .bg-img:hover{
    	height:157px;
        -webkit-transform: scale(1.0) !important;
        transform: scale(1.0) !important;
    }

<div class="img-holder">
    	<div class="bg-img" style="background-image:url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');"></div>
    </div>

我想要达到的实际效果是当将鼠标悬停在div上时，应减小其高度，但该div的背景图像不应随之移动。

Answer 1

使用background-position: 100% 100%;代替center center

.img-holder{
    height:217px;
    width:543px;
    background:#dedede;
    position:relative;

}
.bg-img{
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    background-position: 100% 100%;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    background-size: cover;
    -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
}


.bg-img:hover{
    height:157px;
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;
}

<div class="img-holder">
    <div class="bg-img" style="background-image:url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');"></div>
</div>

Answer 2

为“容器” div放置背景图像和悬停效果将帮助您获得特定效果，但是正如其他答案所述，通常有更好的方法来实现。：）

https://codepen.io/anon/pen/LqNKKN

.img-holder{
    height:217px;
    width:543px;
    background:#dedede;
    position:relative;

    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
  background-image: url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-img{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    display: inline-block;
    background-size: cover;
    -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
}


.img-holder:hover{
    height:157px;
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;
}

鼠标悬停时图像移动

2 个答案: