dreamweaver制作有趣的图片探照灯效果下面给各位介绍制作过程：  
　　第一步：准备图片  
　　我们需要两张图片，一张是背景图，选择一张你喜爱的图片；另一张是用来做探照灯用的，你可以用fireworks等作图工具绘一圆形的图案。如下所示：  


　


背景图（girl.jpg 尺寸255x190）　　　　圆形图（r.gif 尺寸：60x60）  
　　  
　　第二步：建两个层  
　　用Dreamweaver建两个层layer1和layer2。  
　　 层layer1用来放置背景图片，所以层的大小和图片一致，即255x190，然后将图片girl.jpg插入层，或者将图片设置为背景均可；接着给层设置clip属性，clip可以使超出该层的部分被剪切掉，clip也设置成图片大小，即左上角坐标取（0，0），右下角坐标取（255，190）。设置clip属性这一步很关键。层layer1的位置任意。  
　　层layer2是用来放探照灯的，它必须是layer1的子层。所谓子层，也就是代码是嵌套的：  
　　<div id="layer1"...><div id="layer2"...>...</div></div>  
　　由于层layer2将被设置为可以拖动的，为了保证层在被拖动过程中始终能覆盖住层layer1，必须将层layer2的大小至少设置为layer1的两倍大，即设置为510x380；现在你明白设置层layer1的clip属性的重要性了吧：层layer2比层layer1大，用clip将层layer2出界的部分剪掉，这样才能达到预定效果。接着把r.gif插入到层layer2中，注意要插到层的中心处。然后设置层layer2的位置，由于层layer2是层layer1的子层，所以起点坐标采用相对坐标，即（-255，-190）。  
　　全部完成后效果如下：  












  
　　（其中外框为层layer2，内框为层layer1。）  
　第三步：添加css滤镜  
  
　　先给层layer2添加mask滤镜，mask顾名思义就是给layer2戴个面具，语法是：  
　　filter:mask(color=black)  
　　这样layer2就只剩下中间那个透明的圆了。如果你觉得太黑了，可以对层layer2再加个alpha滤镜，使其微微透明，语法是：  
　　filter:alpha(opacity=80)  
　　最后，为了使探照灯具有层次感，再给图片r.gif加个alpha滤镜,style取值2，即圆形。代码是：  
　　filter:alpha(opacity=100,style=2)  
　　全部完成后的代码如下：
  




<div id="Layer1" style="position:absolute; left:0px; top:0px; width:255px; height:190px; z-index:1; clip: rect(0 255 190 0); background-image: url(girl.jpg); layer-background-image: url(girl.jpg); border: 1px none #000000">
<div id="Layer2" style="filter:mask(color=black) alpha(opacity=80);position:absolute; width:510px; height:380px; z-index:2; left: -255px; top: -100px">
<p align="center" > <br><br><br><br><br>
<img src="r.gif" width="60" height="60" style=" filter:alpha(opacity=100,style=2)"></p>
</div>

</div>   
　　第四步：添加动画和行为  
　　添加的动画是让探照灯来回移动，我想大家都会，这里不在多解释了，不过要注意动画的移动范围，并使其循环播放。  
　　所要添加的行为有三个：

　　1.鼠标移上时动画停止播放；
　　2.鼠标移开时动画继续播放；
　　3.使层layer2可以被拖动。注意设置可以被拖动的范围，不要太大了，以防止出界。  
　　最后可以再加点说明文字，全部完成后的代码是：  




<div id="Layer1" style="cursor:crosshair;position:absolute; left:0px; top:0px; width:255px; height:190px; z-index:1; clip: rect(0 255 190 0); background-image: url(girl.jpg); layer-background-image: url(girl.jpg); border: 1px none #000000"  >

<marquee behavior=scroll direction=right width=50 height=120 scrollamount=1 scrolldelay=0 ><font style="margin-top:50;writing-mode:tb-rl;font-size:9pt" face="楷体_GB2312" color=red>您想添加的文字<br> <br>
</font>
</marquee>

<div id="Layer2" style="filter:mask(color=black) alpha(opacity=80);position:absolute; width:510px; height:380px; z-index:2; left: -255px; top: -100px">
<p align="center" > <br><br><br><br><br>
<img src="r.gif" width="150" height="150" style=" filter:alpha(opacity=100,style=2)"></p>
</div>

</div>  
　这样我们再看看下面的效果。