生成web中图片阴影效果技术研究

施艳昭

（安徽电子信息技术职业学院，安徽 蚌埠 233000）

随着互联网技术的发展，网络资源在个人的学习生活中所占比例越来越大，笔者在本校《ASP.NET动态网站设计》省级精品课程网站开发中深刻体会到页面作为一个站点构成的主体，它的美观与否直接能影响用户的使用体验，进而影响站点的访问量.

让二维网页上显示的图片元素有立体效果，其本质就是在图片的右边和底部添加深色的线条，看起来像是图片受到光照，产生的阴影；利用视觉误差产生立体效果.那么下面我们就来简单讨论一下web页面中使用的图片有哪些办法可以添加阴影效果.

1 传统的photoshop处理图片阴影技术

这种方法适用于（1）需要处理的图片数量较少.（2）图片在网页中显示位置及大小相对固定的情况下使用.

photoshop处理步骤如下（以下photoshop简称为PS）

首先，我们准备一张需要处理的图片例如cup.jpg，先调整好图像大小如300*300像素.

（1）打开PS把原图添加进来

（2）新建一个比原图高和宽都大5像素的新文件.使用图层拖动工具将cup.jpg拖动到新建的图层中后，让左顶点对齐.然后在ps工具栏选择：图层->图层样式->投影，选择投影，然后调整投影颜色、大小和角度到合适即可；然后用ctrl+e合并图层.最后另存图片即可得到一个带有阴影的图片，用html标记将图片添加到web页面中后，使得web中使用的图片带有阴影效果（图1）.

图1 ps添加阴影效果图

这种处理方法的优点：（1）只要掌握ps的使用，就可以处理图片.（2）不用修改任何代码.

缺点：（1）修改了图片原样，增大图片体积，如果用户下载图片后将获得带有黑边的图片.（2）如果web中有很多图片需要添加该种效果的话，处理工作量大.（3）需要开发者掌握第三方软件ps的简单使用.

2 纯css处理的阴影技术

这种方法的原理就是，利用css盒子模型，给不同网页元素添加边框，利用边框的粗细不同和位置控制，产生黑色的底边.纯css图片阴影效果，这种方法适用于：（1）图像阴影效果要求不高；（2）网页中有大量图片需要集中处理.

该种方法步骤1.给所需要添加效果的图片添加一个层div标记，并且设置该标记的class为shadow.具体代码如下：

步骤2.给div和img两个标记分别设置css，实际就是添加边框，让div的边框粗于img的边框.

并且img和div中进行填充.具体代码

页面显示效果如图2：

图2 css方法添加阴影效果图

该种方法还有改进的代码：

这种处理方式优点：（1）不修改web图片本身.（2）可以在网页中批量添加图片，完成阴影效果.这种方式缺点：（1）阴影效果不是的那么明显.（2）右上顶点和左下顶点细节位置没有阴影过渡.（3）是如果web中多个图片大小不同，还要为每张图片修改css代码中width值，增大了维护成本.为了克服上述两种方法的缺点，我们引入第三种处理方法.

3 ps+css处理web图片阴影技术-洋葱皮技术

洋葱皮技术（onion-skin）：该种web图片阴影处理方法，来自国外，借鉴了传统动画制作方法.在原来的动画制作流程中，动画师经常使用一种具有洋葱皮特性的薄且透明的纸来绘画图案，这种纸如果是多张叠放在一个明亮的背景灯上面的话，绘画在下层纸张上的图案就会显示在上层的纸张上，动画师就可以看到前面的图案，然后按照最上层纸张上的显现的图案描绘内容即可，提高了工作效率.

该技术原理用在网页中，是因为div标记生成的容器性网页元素，刚好是透明的，如果我们给一张图片嵌套多个div标记，那么每层div标记包裹的内容最后都会叠加显示在一起.

处理步骤如下：

步骤1.我们要用ps制作3个背景阴影图片；第一个图片叫bg.png.为了能自适应更大范围的图片自动添加黑边，制作这张背景图片一般分辨率较大，我们可以使用800*800的格式.具体制作过程参考第一种办法.大家在制作的时候中间区域可以填充白色或者透明色都可.

步骤2.在ps中分别剪切上图右上顶点，和左下顶点阴影颜色有过渡的地方，5*5像素即可.分别叫right-top.jpg left-bottom.jpg.在剪切上面bg.jpg图片时候，有技巧，在ps中按住ctrl键和“+”号键，直到图层显示不再放大，把图片显示区域移动到左下顶点或者右上顶点去剪切有颜色渐变的位置的图片.如下图3所示：

图3 裁剪过渡阴影背景

剪切获得方框范围内的背景透明有颜色渐变图片，保存为jpg格式，5*5像素.这两个图最好不要用png格式，因为png格式支持透明色.透明背景的图片叠加后不能遮挡下一层背景图片显示的黑边部分.

步骤3.Html代码部分完成3层div和图片的嵌套代码如下和背景阴影位置定位，否则图片和背景是分离的，就不能使得背景图片右侧和底侧的黑边显示在web图片的右侧和底侧.*/

该技术的思想：就是在img外层包裹3层div用来添加组成阴影背景的图片.

第一层 添加比较长的右侧和下侧的边框阴影，使用我们制作的第一张图片作为div的背景层使用，该背景必须以右边下顶点作为对齐条件也就是设置css对齐为right bottom.

如果能接受该种效果的图片阴影，那么就可以不继续了.如果你觉得又顶点和左下顶点阴影效果比较生硬；那么继续添加第二层右上的阴影过渡图片right-top.jpg，对齐right top.第三层添加左下的阴影过渡图片left-bottom.jpg，对齐left bottom.

这些设置完成后，只要把图片包裹在三层div中就可以完成自动添加图片阴影效果.如:图4就是在web页面中添加了3张不同大小图片后的效果.

图4 “洋葱皮”技术自动匹配图像阴影效果

这种技术组合运用，1.解决了网页中大量图片阴影成批生成的问题，提高效率.2.该方法还不破坏原图大小和结构.3.解决不同大小的图片阴影自动适应的问题.是我们快速给网页大量图片添加阴影效果的一种便捷办法.4.在web页面内添加大量的带阴影效果的图片后，网页的体积不会像方法一种增大这么明显；有较好的代码重用率.

以上通过三种图片阴影呈现技术的介绍，我们了解了各自的优缺点，可以在具体的项目中灵活选择.

〔1〕陆凌牛.HTM L5与CSS3权威指南上[M].北京：机械工业出版社，2013.150-151.

〔2〕神龙影像．Photoshop CS6中文版平面设计实战从入门到精通 [M].北京：人民邮电出版社，2013.122-123.

〔3〕张良彩.浅谈Photoshop印前图像处理技巧之扣图[J]．电脑知识与技术，2014.