在网页设计时通过设置表格背景图像属性可以制作一些图像特效,例如,给图像镶边、遮掩部分图像实现图像的虚化显示等效果。本例就是利用这一方法实现制作图像残缺效果。
【操作步骤】
第1步,在主体表格的第2个单元格中插入一个20行20列的表格,设置大小为300×300像素。然后设置背景图像。
设置表格属性的代码如下:
<table width="300" height="300" border="0" align="center" cellpadding="0" cellspacing="0" background="image/33.jpg">
第2步,拖选所有单元格,设置所有单元格大小为15×15像素,背景为白色,则把表格的背景图像遮盖住。
第3步,在上面雕刻,按住Ctrl键单击选中要镂空的单元格,然后在【背景】文本框中删除设置的白色即可。利用这种方式可以创意设计出各种图案和变形,犹如绘制像素画。
立体表格主要通过网页设计时的颜色的设置来实现。本例的立体表格效果如图6.42所示。实现的具体步骤如下。
【操作步骤】
第1步,继续以之前示例为基础,打开in-dex.html。选中插入的表格,设置主体表格的第3个单元格背景颜色为蓝色(#667BD8),设置垂直对齐方式为顶端。
第2步,在该单元格中插入一个4行2列的表格,设置宽度为180像素,居中显示
第3步,插入表格的第1行用来控制表格与顶部标题栏的距离,合并第2行的两个单元格,并设置合并单元格背景图像,在设置之前应把第2行高度设置为背景图像的高度。
第4步,设置表格的最后一行和表格右侧单元格为1像素高或宽,背景颜色为白色。并设置主体单元格背景颜色为浅蓝色(#D6DFF7),高为200像素。
第5步,在设计网页时以同样的方式或复制上面制作的表格,就可以重复制作多个立体表格。
当前文章标题:艺术化处理图像
当前URL:http://www.lyjtt.cn/news/wzzz/3115.html
上一篇:案例实战:应用表格
下一篇:在网页设计中定义表格样式