八皇后问题(背景贴图)

八皇后问题(背景贴图)

两种方式:给单元格贴图片或者设置单元格的背景;

本文章采用Css的方式,通过第二种方法,为单元格设置背景:

八皇后问题(背景贴图)

Css还可以对层、按钮以及其他任何元素进行背景设置:

要知道,Css设置的内容是要给浏览器看的,通过相对路径,Css将图片的位置信息发送给浏览器;

制作网页的三种常用图片格式:

grf、jpg、gpn;


八皇后问题(背景贴图)

八皇后问题(背景贴图)

我们将div_img这张图片放在了div当中,我们使用Css方法对div进行设置,并且将Css方法定义在div的后面,而非在head中进行格式设置;

运行效果:

八皇后问题(背景贴图)

八皇后问题(背景贴图)


然而,发现图片在纵向有重复,通过background-repeat进行设置,三种选项:

repeate-x、repeate-y、no-repeate;

background-position:

八皇后问题(背景贴图)

八皇后问题(背景贴图)


下面为棋盘添加皇后:

八皇后问题(背景贴图)

八皇后问题(背景贴图)

运行效果:

八皇后问题(背景贴图)

代码升级:

通过下列代码,使得含有图片的空格中,背景仍然为黑色;

八皇后问题(背景贴图)

注意,queen之前要有空格,使得与上文代码的格式进行匹配:

八皇后问题(背景贴图)


补充一点个人的理解:

table和td是标签,用于设置动态生成的控件的属性;

.back和.queen是属性,用于CssClass或class方式进行样式的设置;