仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 789|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 给大家带来网页殊效之让css使网页图片半通明

[复制链接]
若天明 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:25:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
  你用过css么?固然,我是指你喜好做网页的话,用过?很好,那你用过它的殊效么?没有?那请跟我来。让我先普通的先容一下css,css不属于html,它属于html的帮助言语,在没有css之前,网页是静态的,但自从有了css后,网页制造的汗青就要重写了,css能给网页到场很多你设想不到的静态效果,这也是个中一点罢了,由于css中有良多殊效,比方我们明天讲的使用css使图片变通明。
  大概你会问,GIF图片不是能通明吗?那干吗还那末贫苦,嘿嘿,GIF是能够通明,但能够半通明么?那很分明是不可的,但css就能够。想学就跟我来。
  假如是完整变通明,那末它的意义不年夜,主要的是它能够令图片半通明,嘿嘿,还不分明么?既然是半通明,学过Photoshop的人都应当晓得,半通明了,就能够半遮半掩的显现图片上面的元素!我们使用这一点能够做良多效果哦,比方相似烟雾效果啦,固然,假如你肯动动头脑,更出色的效果大概都能做的出来。我们明天只会商怎样在Dreamweaver4中设置与利用这类殊效。
  Ok,我们如今入手下手,条件是你得翻开Dreamweaver4,上面是设置步骤:没用过这个工具?晕!快到www.xsheji.com下载一个吧。
  1:在Dreamweaver4中点windowàcssstyles(或按键盘的shift+f11),修改cssstyles窗口。
  2:在cssstyles窗口中,单击右下角的加号,弹出newstyle窗口。设置如图:
  


  3:点ok,弹出一个年夜窗口styledefinitionfor.clarity,我们依照下图设置。
  


  大概你已注重到了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:在Dreamweaver4拔出一图,假定高为100,宽为200单元是像素(为了能看到效果,我们能够把网页的背景设为白色等光显的色采。
  2:再次修改cssstyles窗口(拜见设置步骤1)
  3:在cssstyles窗口中,应当有个clarity,如图指明处:
  


  4:在Dreamweaver4选中你拔出的图。
  5:用鼠标单击上的指明处。
  6:半途而废,你能够按键盘的f12来预览了(注重,这类殊效在编纂形态下是不成见的,必定要预览才可见。
  怎样,图片是否是变的半通明了?这教程只起到举一反三的感化,说究竟仍是要人人把握了办法后能触类旁通。
  

</p>
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
变相怪杰 该用户已被删除
沙发
发表于 2015-1-17 23:30:17 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
小妖女 该用户已被删除
板凳
发表于 2015-1-21 12:59:28 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
地板
发表于 2015-1-30 18:50:29 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
蒙在股里 该用户已被删除
5#
发表于 2015-2-16 19:51:43 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
若相依 该用户已被删除
6#
发表于 2015-3-5 09:25:00 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
透明 该用户已被删除
7#
发表于 2015-3-12 03:33:52 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
再现理想 该用户已被删除
8#
发表于 2015-3-19 18:18:30 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-24 02:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表