dw改透明度_Dreamweaver技巧制作图片半透明效果

【推荐】

Dreamweaver

技巧

:

制作图片半透明效果

!

Dreamweaver

技巧

:

制作图片半透明效果

!

在网页的图片处理中，

半透明是经常要用到的图片效果，

它可以半遮半现地显示

图片下面的元素。

利用这一点我们可以做出很多种效果，

例如烟雾效果等。

今天

在这里就讨论如何在

Dreamweaver 4

中设置和使用这种效果。

设置步骤：

1.

在

Dreamweaver 4

中点“window”→“CSS Styles”(或按键盘的

“shift+F11”),调出

CSS Styles

窗口。

2.

在

CSS

Styles

窗口中，单击右下角的加号，弹出

New

Style

窗口。图中

的“Name”是建立的

Class

的名称，

Class

名字的格式是

“.XXXXX”(前面一

定要有个点)

；

“Type”的右边有三个选项，

由上到下分别是：

建立一个

Class

、

重新定义标签(网页元素)、选择伪类；“Define” 的右边有两个选项：上面

指建立外部的

CSS

文件

(选中这个后，

你所建立的

CSS

不是嵌入你的网页，

而是

成为单独的一个

CSS

文件，

供网页调用，

大网站都是此种做法)

；

“this

Document

only”是指直接在当前页中建立

CSS

。

3.

点“OK”，弹出一个大窗口

Style definition for .clarity

，我们按照

图

2

设置。

在图

2

中，除了

*Filter

外，别的选项不要管它。在

*Filter

右边的下拉菜单中

选择

Alpha

。也许你已经注意到了图

2

中的这一段代码“Alpha(Opacity=?,

FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”

里面有很多问号，这些需要我们用参数来代替它们：

(

1

)

“Opacity”代表透明度水准。它的范围是

0

～

100

，其实就是百分比

的意思。如果想变为全透明，就用

0

代替

Opacity

后面的问号；

(

2

)

“FinishOpacity”是用来指定结束时的透明度。其范围跟

Opacity

一样(

FinishOpacity

为可选参数，不想要的话可以去掉它。)；

(

3

)

“Style”是指定透明区域的形状特征。

0

代表统一形状，

1

代表线形，

2

代表放射形，

3

代表长方形；

(

4

)

“StartX”与”StartY”代表渐变效果开始的

X

与

Y

坐标。

一般我们

设置为

StartX=0, StartY=0

(这样表示透明效果是从图片的左上角开始)；

(

5

)

“FinishX”与“FinishY”代表渐变效果结束时的横纵坐标。

这里很

关键，

填什么数值那就要看你的图片的高与宽了，

假设我们的图片高与宽分别是

100

、

200

像素，那么就可以写成

FinishX=200

，

FinishY=100

。

(如果你只想要

一半的面积是透明，那么可以设置成

FinishX=100

，

FinishY=50

)。

设置好这些参数后，就点击“OK”。设置的步骤到此就算完成了。