如何实现图片缩放效果？

实现图片缩放效果我们有两种办法，

方法一：使用css3的transition的过渡效果

    代码： html
                <div></div>
            css
                div{
                        background-image:url(1.jpg);
                        background-size:20px 20px;
                        transition:background-size 3s;
                    }
                div:hover{
                        background-size:50px 50px;
                    }

方法二：使用background-clip（用于背景裁剪）
background-clip拥有四个属性。
①padding-box，从padding区域（不含padding）开始向外裁剪背景。
②border-box，从border区域（不含border）开始向外裁剪背景。
③content-box，从content区域开始向外裁剪背景
④text，从前景内容的形状（比如文字）作为裁剪区域向外裁剪

什么是padding-box、border-box、content-box、text？
这些分别是以padding、border、content、text为界限的一个区域。

一般情况下，在一个div中，border-box区域>padding-box区域>content-box区域>text区域

我们可以通过这种他们区域大小的不同来实现缩放效果，

    代码： html
                <div></div>
            css
                div{
                        background-image:url(1.jpg);
                        background-clip:content-box;
                    }
                div:hover{
                        background-clip:padding-box;
                    }

图片的扩大效果同样的方法实现，这里就不叙述了。