艺术化处理图像

  • 2019-10-24 15:22:28
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页设计时通过设置表格背景图像属性可以制作一些图像特效,例如,给图像镶边、遮掩部分图像实现图像的虚化显示等效果。本例就是利用这一方法实现制作图像残缺效果。

【操作步骤】

第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

上一篇:案例实战:应用表格

下一篇:在网页设计中定义表格样式

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)