关于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还是须要比拟明确的数值变动差别，才可能执行动画成果的