css实现半透明玻璃（图片半透明效果如何用CSS实现）
本文目录
- 图片半透明效果如何用CSS实现
- CSS实例：如何用CSS实现背景半透明
- 可以用CSS直接写出把背景弄成半透明的效果吗
- 请问各位大神，CSS如何做这种像（1）玻璃透明的效果，（2）这种凹进去的黑色风格阴影分割线！谢谢了！
图片半透明效果如何用CSS实现
我们在浏览网页的时候，见过有人将图片做成变透明效果。这一效果我们可以通过图象图片软件来实现。但如果图片较多或者我们想在网页中实现某种特殊效果，就只能用CSS来实现了。 其实这一效果用CSS来实现，也是非常简单的，只要一句代码即可： 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”当然，这个就是代表渐变效果结束时的横纵坐标了，这里很关键，填什么数值那就要看你的图片的高与宽了，假设我们的图片高与宽分别是90、200像素，那么就可以写成FinishX=200， FinishY=90。（如果你只想要一半的面积是透明，那么可以设置成FinishX=100， FinishY=50）以上的效果可以实现
CSS实例：如何用CSS实现背景半透明
css3的opacity=0.5，可根据具体需求调整后面的数值，opacity:0.5;filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
可以用CSS直接写出把背景弄成半透明的效果吗
《html》 《head》 《title》怎样使图片半透明《/title》 《meta content=“text/html; charset=gb2312“ 我们让图片跟随鼠标! 产生半透明效果的方法用了CSS样式！《br》 《/td》 《td width=“68“ height=“236“》 《/td》 《td width=“228“ height=“236“》第一种效果:《font color=“#006666“》Alpha( Style=1, StartX=30, StartY=20, FinishX=15, FinishY=5)《/font》《br》 《img alt=“返回首页!“ border=“0“ class=“style1“ height=“69“ src=“images/PHOT046.JPG“ width=“206“》《br》 《br》 第二种的效果.《font color=“#006666“》Alpha(Style=2)《/font》 《br》 《img alt=“返回首页!“ border=“0“ class=“style2“ height=“65“ src=“images/PHOT046.JPG“ width=“206“》《br》 其他参数自己试试吧！《br》 《br》 《/td》 《/tr》 《/TBODY》 《/table》 《/td》 《/tr》 《/TBODY》 《/table》 《/td》 《/tr》 《tr align=“right“》 《td width=“490“》《/td》 《/tr》 《/table》 《p align=“center“》 《/p》 《/center》 《/body》 《/html》 或者 《html》 《head》 《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“》 《title》用CSS控制透明图片《/title》 《/head》 《body》 《style》 body{ font-size:12px;} #top{position:absolute;} #top a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;} #top a:hover{font-size:9px;} #top a:hover img{-moz-opacity:0.5; filter:alpha(opacity=80);cursor:hand;} 《/style》 《div》 《div id=“top“》《a href=“http://www.jscode.cn“ target=“_blank“》《img src=“http://www.jscode.cn/Uploadfile/200682495750348.JPG“ /》《/a》《/div》 这里是一些文字《/div》 《/body》 《/html》
请问各位大神，CSS如何做这种像（1）玻璃透明的效果，（2）这种凹进去的黑色风格阴影分割线！谢谢了！
其实他这个是美工做好的两张图片，上面白色半透明样式的一张，下面一块大的一张。如果需要他这种效果，一模一样的话，你可以把他的图片下载下来你用。而那种格子阴影效果是可以用css3实现，但是太麻烦，对于做项目而言，得不偿失。对于学习而言，你可以试着做出来，用css3的transform:rotate(90deg)，和内外阴影试试。上面半透明，可以用rgba的颜色模式，和ie兼容的实现，最下面再来一条灰白色的线就是那种玻璃效果。
更多文章：
2024年6月28日 08:49
2024年6月25日 18:40
2024年8月29日 04:05
2024年7月21日 08:30
2024年7月23日 21:49
2024年7月1日 12:23
牧场物语矿石镇的伙伴们（《牧场物语》矿石镇的伙伴们全攻略有哪些）
2024年7月4日 12:23
2024年6月14日 17:02
2024年8月9日 22:16
2024年7月8日 14:14
2023年10月29日 03:00
2024年8月21日 14:10
2024年5月15日 10:59
2024年5月3日 03:05
hp中汉娜爱博是谁？我都可以做你的妈了我求求你做见好事吧啥电视
2024年5月6日 12:11
2024年7月26日 20:01
2024年6月13日 03:28
魔兽世界德鲁伊任务魔王归来打完给什么奖励？魔兽世界7.2魔王归来任务流程详解
2024年6月21日 05:07
2024年8月22日 03:30
visual+studio+code怎么改成中文（Visual Studio Code 怎么用啊，怎么换成中文的）
2024年7月16日 17:56
