研究了很多办法,我只想到把这张人物图片显示3次,最上面的保持不变,中间的放大一点点,最底下的更大一点,然后中间的alpha opacity=50,最底下的=20
大家觉得这个办法是否很笨呢?
大家觉得这个办法是否很笨呢?
解决方案 »
- jquery 绑定多个点击事件
- Javascript 里面var my = {}; 中..我不明白: var my = {} 怎么个意思啊?变量 my到底是什么类型的?
- 为什么以下代码能够关闭IE提示
- javascript中怎么用document.form["f1"].elements["email"]
- 请问这段JS为什么在FF中显示未定义
- 如何捕获Backspace按键?
- 请高手帮忙,做链接提示,关键是要能兼容firefox
- 如何用JS控制IFRAME的滚动条的显示与关闭?
- 奇怪问题:使用javascript函数进行控件方法的调用后,鼠标状态就变成等待状态,除非你调用其他控件的方法。
- 在标题栏(状态栏)里到计时,以1/1000秒为单位,显示3秒(3000-1)然后自动关闭IE ???
- 梅花雪树改变某个节点的图片
- div切换
<!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>
</head>
<style type="text/css">
img{position:absolute}
.img1{filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2;left:0; top:0; z-index:1;}
.img2{filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;left:10px; top:10px; z-index:2;}
.img3{left:100px; top:30px; z-index:3;}
</style>
<body>
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" class="img1"/>
<img src="http://www.baidu.com/img/baidu_logo.gif" class="img2"/>
<img src="http://avatar.profile.csdn.net/0/7/8/2_shyworm.jpg" class="img3"/>
</body>
</html>
就是图片中人物的边缘啊。如果人物图片的颜色跟背景的颜色对比很强烈的话,就可以看出明显的锯齿。
如果这个边缘用alpha半透明过渡,使其颜色慢慢融入背景,就不会有锯齿感了。前面varlj的代码,如果加上把图片稍微放大一点,left和top一次只偏移1个像素,应该就可以达到效果了。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文档</title>
</head>
<style type="text/css">
img{position:absolute}
.img1{filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2;left:0; top:0; z-index:1;width:62px;height:112px;}
.img2{filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;left:1px; top:1px; z-index:2;width:61px;height:111px;}
.img3{left:2px; top:2px; z-index:3;width:60px;height:110px;}
.img4{left:2px; top:100px;}
</style>
<body background="creek.jpg">
<img src="stand.gif" class="img1"/>
<img src="stand.gif" class="img2"/>
<img src="stand.gif" class="img3"/>
<img src="stand.gif" class="img4"/>
</body>
</html>
还好吧,我用你的代码修改了一下,看了效果,还不错的。最后一个是没有轮廓模糊的图片,用来对比的。
用gif,有透明和动画效果。