本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3中的复合图像背景

在CSS 3之前,对div等元素使用图像背景已经是一件司空见惯的事。在CSS 3中,扩展了这一特性,可以对元素使用复合图像背景。本文介绍如何使用这一样式。

如何使用复合图像背景样式?

在CSS 3之前,如果我们要对元素使用多个图像背景,我们可能需要对元素使用多个样式类,在样式代码中对每个样式类使用一个图像背景,代码如下所示:

.overcast1 {
    background-image: url("images/overcast.png");
    background-position: 150px 25px;
}
.rainbow {
    background-image: url("images/rainbow.png");
    background-position: 200px 10px;
}
.overcast2 {
    background-image: url("images/overcast.png");
    background-position: 250px 25px;
}
.sunny {
    background-image: url("images/sunny.png");
    background-position: 100px 10px;	
}

在CSS 3中,可以将以上代码书写在一个background-image样式属性中,代码如下所示:

.weather {
    width: 500px;
    height: 280px;
    margin: 50px auto;
    background-image: url("images/overcast.png"),
		      url("images/rainbow.png"), 
		      url("images/overcast.png"), 
		      url("images/sunny.png");
    background-position: 150px 25px, 
			 200px 10px, 
			 250px 25px, 
			 100px 10px;
    background-repeat: no-repeat;
}

在上述代码中,我们在元素的不同部位使用了四幅不同的图像背景,这将为元素创建一幅复合背景图像。

示例运行结果

添加animation动画特效

接下来,我们可以在图像背景中添加CSS 3中的animation动画特效。为了使代码简洁起见,我们使用W3C中的标准语法,省略各浏览器中的浏览器供应商前缀。

@keyframes weather { 
    0% {
        background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px;
    }
    100% {
        background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px;
    }
}

一旦我们使用@keyframes创建动画关键帧之后,我们只需在元素样式类中将animation样式属性值指定为动画关键帧名(在本例中为weather)并指定动画时长即可。

.weather {
    animation: weather 5s;
}
示例运行结果

目前只在Chrome浏览器与Safari浏览器中有效。另外,如果观察示例运行结果时动画已经执行完毕,请刷新页面后继续观察。