利用CSS更换背景图片

1、插入一个3行3列的表格,边框、间距和边距都设置为0

2、设置所有单元格的高度为117,宽度为163,就是每张卡通人物图片的大小。

3、在右边的CSS样式面板中点击新建CSS规则按钮,如下图所示:

4、新建CSS规则的选择器类型为“类(可应用于任何HTML元素)”,选择器名称为.td1,如下图所示:

5、设置规则的背景图片为某张黑白卡通图片,设置好后点确定关闭对话框,如下图所示:

6、选中第一个单元,方法是:在第一个单元格内点击鼠标,然后通过属性面板上面的标签选择栏选中td标签,点击HTML,再将设为刚才定义的td1规则,如下图所示:

7、再次点击CSS样式面板中的新建CSS规则按钮,新建另一条样式规则,选择器类型选择“复合内容(基于选择的内容)”,选择器名称输入.td1:hover,如下图所示:

8、在规则定义对话框中,点击背景分类,设置背景图片(Background-image)为刚才选择卡通人物对应的彩色图片,如下图所示:

9、重复4~8的步骤为其他单元格定义相应的样式,这样就实现了鼠标放到指定图片上会自动变色的效果,点击查看效果

10、本例所定义的CSS样式规则如下:

<style type="text/css">
.td1 {
  background-image: url(images/css_01_12.jpg);
}
.td1:hover {
  background-image: url(images/css_01_11.jpg);
}
.td2 {
  background-image: url(images/css_01_22.jpg);
}
.td3 {
  background-image: url(images/css_01_32.jpg);
}
.td4 {
  background-image: url(images/css_01_42.jpg);
}
.td5 {
  background-image: url(images/css_01_52.jpg);
}
.td6 {
  background-image: url(images/css_01_62.jpg);
}
.td7 {
  background-image: url(images/css_01_72.jpg);
}
.td8 {
  background-image: url(images/css_01_82.jpg);
}
.td9 {
  background-image: url(images/css_01_92.jpg);
}
.td2:hover {
  background-image: url(images/css_01_21.jpg);
}
.td3:hover {
  background-image: url(images/css_01_31.jpg);
}
.td4:hover {
  background-image: url(images/css_01_41.jpg);
}
.td5:hover {
  background-image: url(images/css_01_51.jpg);
}
.td6:hover {
  background-image: url(images/css_01_61.jpg);
}
.td7:hover {
  background-image: url(images/css_01_71.jpg);
}
.td8:hover {
  background-image: url(images/css_01_81.jpg);
}
.td9:hover {
  background-image: url(images/css_01_91.jpg);
}
</style>