background-size使用transition失效,背景图片增加放大平滑效果transition

裴七七

于 2021-12-23 15:26:57 发布

阅读量1.6k

点赞数 1

分类专栏： html css CSS3 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_44450506/article/details/122108795

版权

18 篇文章

订阅专栏

11 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了一种使用CSS实现背景图片放大过渡效果的方法。通过设置div元素的background-size属性及transition属性，结合:hover伪类，实现了鼠标悬停时背景图片平滑放大的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div{
    background-size: 100%;
    transition: background-size 0.5s linear;
}
div:hover{
    background-size: 108%;
}

如图使用transition时背景图片放大没有过渡效果,可以使用上述办法。