我正在尝试添加一个css过渡，因此当用户悬停在div上时，后台将像这样放大https://codepen.io/mrsalami/pen/eplzme。但是，转换延迟不起作用。
我得HTML：
<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center no-repeat;">
<div class="home-box-text">
<h1>What We Do</h1>
</div>
</div>
我的CSS：
#home-block {
width: 100%;
transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
height: calc((100vh - 133px)/ 3);
-webkit-background-size: 100%;
background-size: 100%;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#home-block:hover {
background-size: 150% !important;
}
#home-block .home-box-text {
margin: 0;
}
#home-block .home-box-text h1 {
font-size: 30px;
text-transform: uppercase;
}
#scroll-body {
padding-left: 35px;
}
我的问题的代码是https://codepen.io/mrsalami/pen/wkjrjr
您可以将css中的图像更改为身体的背景图像，如下所示：
#home-block {
background:url(http://www.intrawallpaper.com/static/images/1968081.jpg) no-repeat;
width: 100%;
height: 200px;
color:#86A3B1;
background-size: 100%;
transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-webkit-transition: all 3s ease;
-o-transition: all 3s ease;
}
#home-block:hover {
background-size: 150%;
}
