站长之家-站标logo图片
欢迎你来到站长之家!
携手合作图片
banner图片
当前位置:站长之家 >> 网站技术 >>



站长之家提供使用滤镜让网页对象半透明效果


【发布人:站长之家    发布日期:2015-03-28】

站长们在做网站界面的编码时,有时候为让界面更加美观,可以使用一些CSS的特效技术,比如滤镜技术。使用滤镜技术可以实现网页对象的特殊的效果。在这里,站长之家测试并提供了使用滤镜让网页对象半透明效果的实例,在下面展示出来,供广大站长们参考。本实例代码已经在IE浏览器、Chrome浏览器和360安全浏览器上测试通过,可以放心使用。关于代码中的核心部分,就是一些css样式的定义,在样式定义中加入滤镜效果,本例中使用了滤镜filter中的alpha透明度的效果,各位可以根据实例代码的功能,修改相关的参数,从而实现其他更加美观的界面效果。

下面就将使用滤镜让网页对象半透明效果的实例代码展示在下面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标放图片和链接上显示滤镜效果实例</title>

<style type="text/css">

img:hover{filter:alpha(Opacity=50); -moz-opacity:0.5; opacity: 0.5}
a:hover{filter:alpha(Opacity=50); -moz-opacity:0.5; opacity: 0.5}

</style>

</head>
<body>

<p>在鼠标移到图片上时显示滤镜效果</p>
<p><img src="images/tupian.png" /></p>
<p><a href="#">站长网(www.zzdj.net)</a></p>

</body>
</html>

下面的图片是本实例代码执行的结果图示,图一中是网页显示出的本来效果,可以看到图片和超级链接都很清晰,没有出现半透明效果。图二是在鼠标放到图片上和超级链接上时,网页对象显示出半透明的效果。各位站长们可以结合图片来更好地理解实例代码。

网页对象滤镜半透明效果实例图片



(本页地址为:http://www.zzdj.net/tech/tech-7.html,请尊重别人劳动,不要复制和采集。转载请注明本文出处)

信息显示图片
页脚blank图片

版权所有:站长之家-站长网【www.zzdj.net】