css3两个背景切换效果

CSS3中的两个背景切换效果是通过background-image属性实现的，分别是background-size和background-clip。

/*使用background-size实现两个背景切换*/
div{
background-image: url(bg1.jpg), url(bg2.jpg);
background-size: 100px 100px;/*第一个背景大小*/
background-position: 0 0, 10px 10px;/*第一个背景位置*/
}

上述代码中，使用background-image同时加载bg1.jpg和bg2.jpg两张背景图片，然后使用background-size属性分别定义了两个背景图片的大小。最后，需要使用background-position来定义每个背景图片相对于容器的位置以达到切换的效果。

/*使用background-clip实现两个背景切换*/
div{
background-image: url(bg1.jpg), url(bg2.jpg);
-webkit-background-clip: content-box, padding-box;
-moz-background-clip: content-box, padding-box;
background-clip: content-box, padding-box;
}

上述代码中，同样是使用background-image加载两张背景图片，但是这次是使用background-clip属性来实现切换。content-box表示只在元素内绘制背景（不包括内边距），padding-box表示在内容以及内边距区域之内绘制背景，这样就可以实现两个背景图片的切换效果。

查看更多关于css3两个背景切换效果的详细内容...