关于css:记录一个使用backgroundimage方式展示图片实现Hover平滑缩放效果的技巧

开发时候除了间接用 img 标签搁置图片外，也常常会用到在 div 中间接应用 background-image 的形式将图片作为背景图片搁置，通常会是这个样子：

.cover{
    display: block;
    background-position: 50%;
    background-size: cover;
}

如果这时候须要做一个鼠标 Hover 下来时平滑放大一点，移开又平滑恢复原状的成果，就须要借助 backgound-size 来实现。

.cover:hover{background-size: 110%;}

同时还须要在原有款式中加上 transition 的设置

.cover{
    ...
    transition: all .3s ease-in-out;
    background-size: cover;
}

然而这个时候发现尽管鼠标 hover 时背景图片曾经有放大成果，然而平滑适度动画并没有起成果，仍然是僵硬的变动，所以可能的起因是 transition 并不知道要怎么执行对应的 CSS 参数平滑适度。看了下 Hover 的前后差异，是 background-size: cover 变成了 background-size: 110%，这个。。。仿佛它并不知道怎么进行线性变动呢，于是把原有 CSS 成果中的 background-size 改成 100% 试一下：

.cover{
    transition: all .3s ease-in-out;
    background-size: 100%;
}
.cover:hover{background-size: 110%;}

试一下，Bingo！动画适度很天然，所以 transition 还是须要比拟明确的数值变动差别，才可能执行动画成果的