记录一个使用background

您所在的位置：网站首页 › hover在css中改变图片大小 › 记录一个使用background

记录一个使用background

2024-03-25 08:55| 来源: 网络整理| 查看: 265

开发时候除了直接用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还是需要比较明确的数值变化差异，才能够执行动画效果的

【本文地址】

记录一个使用background

记录一个使用background

今日新闻

推荐新闻