div 透明问题

变通一下最底下是图片层
中间是半透明的DIV层
最上面是一小块需要全透明的图片层，设死宽高，
控制顶层的图片和最底下的图片层位置重合

n个div拼起来么...然后把中间要透明的那块div消失就行了，就是div多点，比较麻烦而已

小块移动就去控制小块的left、top
和小块背景图片的background-postion去更改位置（如果是背景图片的话）

<!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=utf-8" />
<title>alpha picture</title>
<style type="text/css">
.leftAlpha{
dth:250; height:373px;
float:left;
filter:alpha(opacity=50); /*IE*/
   -moz-opacity:0.5; /*MOZ , FF*/
   opacity:0.5; /*CSS3, FF1.5*/
}
.rightAlpha{
dth:250; height:373px;
float:right;
filter:alpha(opacity=10); /*IE*/
   -moz-opacity:0.1; /*MOZ , FF*/
   opacity:0.1; /*CSS3, FF1.5*/
}
#picture{
background:url(picture.jpg) no-repeat;
width:500; height:373px;
}
</style>
</head><body>
<div id="picture">
<div class="leftAlpha"></div>
<div class="rightAlpha"></div>
</div>
</body>
</html>

楼主去看下CSS滤镜，然后用相对或绝对定位试试

<!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 name="designer" content="csdn design team" /><meta name="ROBOTS" content="NOINDEX, NOFOLLOW" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="/PointForum/ui/styles/default/BBSGlobal.css" />
<link rel="stylesheet" type="text/css" href="/PointForum/ui/styles/default/mzform.css" />
<title>
回复
</title>
    <style type="text/css">
        /* user info */
.item td.info{width: 165px;vertical-align: top;background-color: #CDD3DA;padding:8px 0px 0px 8px; }
.item td.info a{color:Black;}
.item td.info ul,.item td.info li, .item td.info dl{margin: 0px; list-style-type: none; line-height: 180%;}
.item td.info ul{clear:both;}
.item td.info  textarea{font-size:12px; color:#666666; font-family:??ì?; width: 160px; border:none; overflow:hidden; background-color:transparent; height:30px;}
.topic td.info ul{height: 300px;}
table.replyPost{width:100%;height:490px}
table.replyPost td.main{color: #4D577A;}
table.replyPost .main a{color: #000000;}
table.replyPost .submitRegion{padding: 8px 0;}
    </style>

    <script type="text/javascript">
    
    </script>

</head>
<body style="width: 100%; padding: 0; margin: 0;">

            <script type="text/javascript" language="javascript">
                var duration=5000;
                var timer=null;
                var endTime = new Date().getTime() + duration + 100;
                function interval()
                {
                    var n=(endTime-new Date().getTime())/1000;
                    if(n<0) return;
                    //document.getElementById('timeout').innerHTML = n.toFixed(3);
                    setTimeout(interval, 10);
                }
                //window.onload=function()
function Clouse()
                {
timer=setTimeout(DivClose, duration);
                    timer=setTimeout("window.open('http://localhost:90/psc','_top')" , duration);
                    interval();
                };
        </script>

        <table class="item replyPost" cellspacing="1" style="margin: 0; border: none;">
            <tr>
                <td class="info" style="text-align: left; padding-top: 3px;">
            
                <div>
                    <ul>
                    <li><a href='http://book.csdn.net/programmer/' target='_blank'><font color='#000000'>订阅08年全年《程序员》杂志，好礼周周送</font></a></li>
<li><a href='http://www.uplooking.com/content/view/1701/80/' target='_blank'><font color='#000000'>免费linux课程，50000年薪就业！</font></a></li>
<li><a href='http://g.csdn.net/5042497' target='_blank'><font color='#000000'>Solaris下常见Java开发环境的搭建</font></a></li>
<li><a href='http://www.bstek.com/' target='_blank'><font color='#000000'>dorado学习DVD免费申请</font></a></li>
<li><a href='http://www.now.cn/' target='_blank'><font color='#000000'>时代短信,低至4分5一条</font></a></li>
<li><a href='http://ad.cn.doubleclick.net/clk;190699635;24982187;chttp://ad.cn.doubleclick.net/clk;165529274;23036548;l?http://www.elink-ad.com/oracle/scm/' target='_blank'><font color='#000000'>甲骨文SCM制胜未来战争</font></a></li>
<li><a href='http://www.itcast.cn/jgaoshou.htm' target='_blank'><font color='#000000'>2000元学Java EE高手精华班</font></a></li>
                    </ul>
                </div>
                    <iframe marginheight="0" marginwidth="0" id="AD" name="AD" frameborder="0" scrolling="no" width="150" style="height: 0;" src="about:blank"></iframe>
                </td>
                <td class="main">
                 <input type="button" value="点击这里" onclick="sAlert('<img src=ajax-loader.gif >系统正在处理数据,请稍后...');Clouse();" />

                <div class='simpleTips success'><span ><cite>回复已成功,3秒钟后将自动跳转到帖子页面</cite></span></div><div></div>

                </td>
            </tr>
        </table>
</body>
</html>
<script type="text/javascript" language="javascript">
//Author:lifuyun
//Blog:http://blog.csdn.net/lfywy
//Date:2006-10-27
//Email:[email protected]
   function sAlert(str){
   var msgw,msgh,bordercolor;
   msgw=300;//提示窗口的宽度
   msgh=100;//提示窗口的高度
   titleheight=25 //提示窗口标题高度
   bordercolor="#336699";//提示窗口的边框颜色
   titlecolor="#99CCFF";//提示窗口的标题颜色

   var sWidth,sHeight;
   sWidth=document.body.offsetWidth;
   sHeight=screen.height;
   var bgObj=document.createElement("div");
   bgObj.setAttribute('id','bgDiv');
   bgObj.style.position="absolute";
   bgObj.style.top="0";
   bgObj.style.background="#777";
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
   bgObj.style.opacity="0.6";
   bgObj.style.left="0";
   bgObj.style.width=sWidth + "px";
   bgObj.style.height=sHeight + "px";
   bgObj.style.zIndex = "10000";
   document.body.appendChild(bgObj);

   var msgObj=document.createElement("div")
   msgObj.setAttribute("id","msgDiv");
   msgObj.setAttribute("align","center");
   msgObj.style.background="white";
   msgObj.style.border="1px solid " + bordercolor;
      msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight ="25px";
            msgObj.style.zIndex = "10001";

     var title=document.createElement("h4");
     title.setAttribute("id","msgTitle");
     title.setAttribute("align","right");
     document.body.appendChild(msgObj);
     document.getElementById("msgDiv").appendChild(title);
     var txt=document.createElement("p");
     txt.style.margin="1em 0"
     txt.setAttribute("id","msgTxt");
     txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }
function DivClose(){
          document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
//sAlert('<img src=ajax-loader.gif >系统正在处理数据,请稍后...');
  </script>
</body>
</html>望对你有用！临时弄的！自己改改！

<!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=utf-8" />
<title>alpha picture</title>
<style type="text/css">
.leftAlpha{
width:250px; height:333px;
float:left;
background:#efefef;
filter:alpha(opacity=50); /*IE*/
   -moz-opacity:0.5; /*MOZ , FF*/
   opacity:0.5; /*CSS3, FF1.5*/
}
.rightAlpha{width:250px; height:333px;
float:right;
ackground:#efefef;
filter:alpha(opacity=10); /*IE*/
   -moz-opacity:0.1; /*MOZ , FF*/
   opacity:0.1; /*CSS3, FF1.5*/
}
#picture{
background:url(http://cimg20.163.com/auto/2008/5/27/2008052714285782380.jpg) no-repeat;
width:500px; height:333px;
float:left;
}
</style>
</head><body>
<div id="picture">
<div class="leftAlpha"></div>
<div class="rightAlpha"></div>
</div>
</body>
</html>

最好的方法是用。png图片来作为div的背景哪样就不用多个div来现显且方便

lfywy:有点儿问题，你上面的小块没有透明看到下面。
现在看到大家的方法，基本上都是用最上面的一层是用原图绝对位置和相对位置，造成视觉错觉形成的效果，有没有更好的办法。我希望的效果是小块可以移动的啊。

cscom：看到你的效果了，可是你没有明白我得意思可能。

我那个代码是给你参考的！你修改一下就可以全部覆盖了，要是颜色黑了点，在滤镜里调调就OK了！你不会要我帮你把完整的代码写好给你吧？
OO，MY GOD!

解决方案 »