新闻 | 天津 | 民生 | 广电 | 津抖云 | 微视 | 读图 | 文娱 | 体育 | 图事 | 理论 | 志愿 | 专题 | 工作室 | 不良信息举报
教育 | 健康 | 财经 | 地产 | 天津通 | 旅游 | 时尚 | 购物 | 汽车 | IT | 亲子 | 会计 | 访谈 | 场景秀 | 发布系统

"津云"客户端
  您当前的位置 : 北方网  >  IT浪潮  >  北方学院  >  软件文库  >  图文处理
关键词:

用CSS实现网页图片半透明[图]


http://www.enorth.com.cn  2001-12-07 10:50

  学过Photoshop的人都应该知道如何制作半透明的图片!我们今天只讨论如何在Dreamweaver 4中设置与使用这种特效。

  首先打开Dreamweaver 4,下面是设置步骤:

  1:在Dreamweaver 4中点Window CSS styles(或按键盘的shift+f11),调出CSS styles窗口。

2:在CSS styles窗口中,单击右下角的加号,弹出new style窗口。设置如图1

  

图1

  3:点OK,弹出一个大窗口style definition for .clarity,我们按照如图2设置。

  

图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代表长方形。比如我们一般可以写成Style=1。

  (4)“startX”与”startY”就是代表渐变效果开始的X与Y坐标,(坐标应该知道是什么吧)一般我们设置为StartX=0, StartY=0(这样就是表示的透明效果是从图片的左上角开始的。)

  (5)“FinishX”与“FinishY”,当然,这个就是代表渐变效果结束时的横纵坐标了。这里很关键,填什么数值那就要看你的图片高与宽了。假设我们的图片高与宽分别是100、200像素,那么就可以写成FinishX=200,FinishY=100。(如果你只想要一半的面积是透明,那么可以设置成FinishX=100, FinishY=50)

  下面一个完整代码供大家参考:(下面的数值我是假设图片高与宽分别是100、200像素)

  Alpha(Opacity=25, FinishOpacity=50, Style=1, StartX=0, StartY=1, FinishX=200, FinishY=100)

  4:OK,设置好这些参数后,就点击OK,设置的步骤到此就算完成了。我们还要把这个效果赋予图片,请看下面的步骤。

  (1)在Dreamweaver 4插入一图,假设高为100,宽为200单位是像素(为了能看到效果,我们可以把网页的背景设为红色等鲜明的色彩。)

(2)再次调出CSS styles窗口(参见设置步骤1)

(3)在CSS styles窗口中,应该有个clarity,如图3指明:

  

图3

  (4)在Dreamweaver 4选中你插入的图。

(5)用鼠标单击上图3的指明处。

(6)大功告成,你可以按键盘的f12来预览了。

  怎么样,图片是不是变得半透明了?这教程只起到抛砖引玉的作用,说到底还是要大家掌握了方法后才能举一反三。

  

编辑:赵海涛 赛迪网
[进入IT论坛]
请您文明上网、理性发言并遵守相关规定,在注册后发表评论。
 北方网精彩内容推荐
无标题文档
天津民生资讯
天气交通 天津福彩 每月影讯 二手市场
空气质量 天津股票 广播节目 二手房源
失物招领 股市大擂台 天视节目 每日房价
热点专题
北京奥运圣火传递和谐之旅 迎奥运 讲文明 树新风
解放思想 干事创业 科学发展 同在一方热土 共建美好家园
2008天津夏季达沃斯论坛 《今日股市观察》视频
北方网网络相声频道在线收听 2008高考招生简章 复习冲刺
天津自然博物馆馆藏精品展示 2008年天津中考问题解答
带你了解08春夏服饰流行趋势 完美塑身 舞动肚皮舞(视频)
C-NCAP碰撞试验—雪佛兰景程 特殊时期善待自己 孕期检查
热点新闻排行 财经 体育 娱乐 汽车 IT 时尚 健康 教育

Copyright (C) 2000-2021 Enorth.com.cn, Tianjin ENORTH NETNEWS Co.,LTD.All rights reserved
本网站由天津北方网版权所有