|
网络发烧友
|
1#
大 中
小 发表于 2007-1-4 12:35 只看该作者
让css使网页图片半透明
2 V: K1 L. S: j% c6 [" E163k团购网站系统官方服务论坛. W6 ]( |" C$ b- b0 G; O
你用过css么？当然，我是指你喜欢做网页的话，用过？很好，那你用过它的特效么？没有？那请跟我来。
9 `$ Q1 @7 I; e' f( [3 f5 }) J为互联网事业发展提供源动力！bbs.163k.com9 K- J, a* i5 z% x p+ I
让我先通俗的介绍一下css，css不属于html，它属于html的辅助语言，在没有css之前，网页是静态的，但自从有了css 后，网页制作的历史就要重写了，css能给网页加入许多你想象不到的动态效果，这也是其中一点而已，因为css中有很多特效，例如我们今天讲的利用css使图片变透明。bbs.163k.com2 [+ ~5 a1 I- b. |, `& s6 {4 Z
: y# H# n. Q# l3 F) {163K网站系统官方论坛 也许你会问，gif图片不是能透明吗？那干嘛还那么麻烦，嘿嘿，gif是可以透明，但可以半透明么？那很明显是不行的，但css就可以。想学就跟我来。
! h- c5 p: n# {0 k% {为互联网事业发展提供源动力！* ]5 g7 f$ ]% n0 E. h, q3 a) ~! X
如果是完全变透明，那么它的意义不大，重要的是它可以令图片半透明，嘿嘿，还不明白么？既然是半透明，学过photoshop的人都应该知道，半透明了，就可以半遮半掩的显示图片下面的元素！我们利用这一点可以做很多效果哦，例如类似烟雾效果啦，当然，如果你肯动动脑筋，更精彩的效果可能都能做的出来。我们今天只讨论如何在 4中设置与使用这种特效。
- D" ~8 D7 k' G! h; \- n3 f7 v163K网站系统官方论坛
+ v( j5 G& ]5 l& {4 p163k团购网站系统官方服务论坛
; A' ~6 u. S* d* D+ U/ x; \& o: J- O% c 我们现在开始，前提是你得打开dreamweaver 4，下面是设置步骤：没用过这个工具？晕！快到www.xsheji.com 下载一个吧。
) O8 E$ r" K7 F$ r为互联网事业发展提供源动力！/ \+ Q0 r5 f- }" n
1.在dreamweaver 4中点windowàcss styles(或按键盘的shift+f11),调出css styles窗口。
/ g, c2 q0 D: [! Y8 U163K网站系统官方论坛
$ c, a4 i% D2 Q' K0 o163k团购网站系统官方服务论坛 2.在css styles窗口中，单击右下角的加号，弹出new style窗口。设置如图：bbs.163k.com/ f0 u7 v5 X, n3 t
团购网站系统,团购网程序; P( i0 r/ [) j4 d
. e4 q) M) r7 x1 p* a163k团购网站系统官方服务论坛
. o, c R' V2 P) x. b; H6 e. M: S' F团购网站系统,团购网程序163k团购网站系统官方服务论坛4 f$ Q' m$ V F
团购网站系统,团购网程序7 f3 B, |0 ]5 |% `6 y$ F
3.点ok，弹出一个大窗口style definition for .clarity，我们按照下图设置。
2 q9 g$ N# k# N% x0 I1 a4 K团购网站系统,团购网程序bbs.163k.com& ?" B2 w6 G2 X$ F
163k团购网站系统官方服务论坛, ?' t) j' y$ `
( N: {9 G6 v u2 I) wbbs.163k.com团购网站系统,团购网程序2 O! T& ?6 y* Y5 H6 z. P
为互联网事业发展提供源动力！% Z# N: m( N% ?" _6 X( ^
也许你已经注意到了alpha(opacity=?, finishopacity=?, style=?, startx=?, starty=?, finishx=?, finishy=?)这一段代码，里面有很多问号，这需要我们去用参数来代替它，不要看到代码就怕，无非就几个意思，了解后不就那么一回事嘛。要得到好的效果，那么这些用来代替问号的参数可不能马虎，先看看每一样参数的意思我们再继续。
4 X, x& d7 B- n# u" d7 j. j为互联网事业发展提供源动力！团购网站系统,团购网程序" x! a- u$ @0 Z* H! _6 {
1)“opacity”代表透明度水准，范围是0---100，其实就是百分比的意思，如果你想变为全透明，那么就用0代替opacity后面的问号吧。bbs.163k.com# z$ r2 T- q( W: h0 m
163k团购网站系统官方服务论坛$ J p/ o. p, \6 l
2)“finishopacity”就是用来指定结束时的透明度，范围跟opacity一样(finishopacity为可选参数，不想要的话就去掉它吧。
( C8 ?/ ^7 F. U4 n, C; k163K网站系统官方论坛
& i2 W5 |$ S% o$ Z163k团购网站系统官方服务论坛 3)“style”是指定透明区域的形状特征，0代表统一形状，1代表线形，2代表放射形，3代表长方形。比如我们一般可以写成style=1。
; E6 s4 \! i) r' w8 B0 g1 m% f/ Y163K网站系统官方论坛为互联网事业发展提供源动力！, {% y, n2 M4 ^
4)“startx”与”starty”就是代表渐变效果开始的x与y坐标，(坐标应该知道是什么吧)一般我们设置为startx=0, starty=0(这样就是表示的透明效果是从图片的左上角开始的。)
& d' N: n. D/ x6 j4 @$ R- [# ^# F163k团购网站系统官方服务论坛
9 l* d% n' i! R7 |* e1 V为互联网事业发展提供源动力！ 5)“finishx”与“finishy”当然，这个就是代表渐变效果结束时的横纵坐标了，这里很关键，填什么数值那就要看你的图片的高与宽了，假设我们的图片高与宽分别是100、200像素，那么就可以写成finishx=200， finishy=100。(如果你只想要一半的面积是透明，那么可以设置成finishx=100， finishy=50)
) i0 N3 e0 t N) q) l163K网站系统官方论坛
; ?+ M* G: I: O6 W为互联网事业发展提供源动力！ 给下面一个完整代码的给你们参考：(下面的数值我是假设图片高与宽分别是100、200像素)
1 }1 T9 c$ U( c) B7 U8 {" P为互联网事业发展提供源动力！
- }( \4 |" i- Q, V% z团购网站系统,团购网程序 alpha(opacity=25, finishopacity=50, style=1, startx=0, starty=1, finishx=200, finishy=100)
8 [6 a2 [1 J% S+ V% [163K网站系统官方论坛bbs.163k.com W) s0 F, e" Z! V, f X
4：这时候你应该做的是把你想要的数值把那些讨厌的问号替换掉，设置好这些参数后，就点击ok。设置的步骤到此就算完成了，但设置完了不代表我们就做完了，我们还要把这个效果赋予图片呢。下面介绍如何使用的步骤。3 g' o8 d7 @* g- N \2 E
y7 x( T, m+ A9 l9 ~. z163k团购网站系统官方服务论坛 1)在dreamweaver 4插入一图，假设高为100，宽为200单位是像素(为了能看到效果，我们可以把网页的背景设为红色等鲜明的色彩。163K网站系统官方论坛% D) v5 u1 n9 E
' v: x( u% I- Z为互联网事业发展提供源动力！ 2)再次调出css styles窗口(参见设置步骤1)
5 m$ S7 h. a/ |8 ?163k团购网站系统官方服务论坛
* P4 a) k: `, b3 ]' r为互联网事业发展提供源动力！ 3)在css styles窗口中，应该有个clarity，如图指明处：163k团购网站系统官方服务论坛$ y1 ^1 T, ?( k% {+ B2 ~
. s M+ j& ^$ F3 c+ C: ebbs.163k.com
- {( S8 Y+ D8 ]6 m/ z6 K2 L/ Abbs.163k.com 163k团购网站系统官方服务论坛) h3 f* R% X/ F. G+ i2 h+ |
) e# Y6 Q) y8 K. s9 I, v# qbbs.163k.combbs.163k.com" c5 {9 k5 h' }! x8 E2 F
, R) \# F% I% b$ q为互联网事业发展提供源动力！bbs.163k.com# Z% u5 [) i6 I2 Z
163k团购网站系统官方服务论坛6 K+ T5 ?, E4 c7 d8 a
$ G; D B7 n3 i+ J团购网站系统,团购网程序 图3163K网站系统官方论坛( G+ ?* o D- t# p* s7 l
$ g9 K M6 k# `) z2 {$ N1 l5 b4 }为互联网事业发展提供源动力！
3 L, P, i' @0 k" ]" g163k团购网站系统官方服务论坛 4)在dreamweaver 4选中你插入的图。团购网站系统,团购网程序) T& f, [- T+ r( {( E
为互联网事业发展提供源动力！# D' | W& k/ f- c9 }
5)用鼠标单击上图3的指明处。为互联网事业发展提供源动力！/ P' `1 ~/ |0 G
& y3 M: c8 @6 G: ]' V163k团购网站系统官方服务论坛 6)大功告成，你可以按键盘的f12来预览了(注意，这种特效在编辑状态下是不可见的，一定要预览才可见。
" b8 j$ |! t8 O$ a f团购网站系统,团购网程序bbs.163k.com: J( z* B* ]5 l
怎么样，图片是不是变的半透明了？这教程只起到抛砖引玉的作用，说到底还是要大家掌握了方法后能举一反三。
z7 B! z/ M! W, |2 p! t* q为互联网事业发展提供源动力！" L" f, i* s+ ~
下一节 表单外观的美化
& n6 k+ V) U# A9 F+ u% Y163K网站系统官方论坛为互联网事业发展提供源动力！: b. C" Y$ |( W+ T
! m) U/ w' E- C: d, y# v0 S5 N163K网站系统官方论坛
$ G5 v4 s; k1 z6 F为互联网事业发展提供源动力！
* ]! b! M u. A7 l( o& M2 _; D团购网站系统,团购网程序 163k团购网站系统官方服务论坛0 O4 J* B* |' z; e& r7 N" b
7 P& B6 m! h P9 v0 w163k团购网站系统官方服务论坛
( l- f+ R! O' H6 V3 y' q
|
