背景图片的放缩效果

最新推荐文章于 2024-10-11 13:58:34 发布

微aa

最新推荐文章于 2024-10-11 13:58:34 发布

阅读量233

点赞数 2

本文链接：https://blog.csdn.net/ttttqqqqq/article/details/107849068

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

由于是图片的放缩，所以大家在copy时，请自行准备一张图片。
当然你可以将div的宽高设大一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-image: url(img/01.jpg);
            width: 200px;
            height: 200px;
            
            /* 设置图片的大小 */
            background-size: 100% 100%;
            
            /* 背景图片定位 */
            /* 注意：背景定位一定要提前设置好 */
            background-position: 50% 50%;
            
            /* css3的过渡效果，让放大的动作更加平缓 */
            /* 这里让它的放大效果在1s钟内完成，做了一个慢镜头 */
            /* 当然时间可以更改 */
            transition: all 1s;
        }
        div:hover{
            /* 相对于之前放大1.5倍 */
            background-size: 150% 150%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

本想上传视频，奈何发现不会，大家自行尝试吧。

再来看看普通图片的放缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            overflow: hidden;
            width: 300px;
            height: 300px;
        }
        img{
            transition: all 1s;
        }
        img:hover{
        	 /* css3的属性，放大1.5倍 */
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div>
        <img src="img/01.jpg" alt="">
    </div>
</body>
</html>

这两种放大效果，如果考虑到css3的兼容性问题，可以使用第一种
当然，实现这种效果肯定不止这两种方法，大家可以自行发掘