好难啊：在一张大的图片上显示一张小的人物图片，人物的轮廓要alpha透明，该怎么做呢？

研究了很多办法，我只想到把这张人物图片显示3次，最上面的保持不变，中间的放大一点点，最底下的更大一点，然后中间的alpha opacity=50,最底下的=20
大家觉得这个办法是否很笨呢？

解决方案 »

  1.   

    这样？
    <!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>
      

  2.   


    就是图片中人物的边缘啊。如果人物图片的颜色跟背景的颜色对比很强烈的话，就可以看出明显的锯齿。
    如果这个边缘用alpha半透明过渡，使其颜色慢慢融入背景，就不会有锯齿感了。前面varlj的代码，如果加上把图片稍微放大一点，left和top一次只偏移1个像素，应该就可以达到效果了。
      

  3.   

    控制都在CSS里面，很好奇效果是怎样的……我随便找了几张LOGO图，效果惨不忍睹啊
      

  4.   

    <html>
    <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，有透明和动画效果。