*{
????margin:?0?auto;
????border:?0;
????padding:?0;
}
html?body{
????position:?relative;
}
#cn{
????width:?430px;
????height:?260px;
????border:?2px?solid?#f60;
????padding:?0;
????position:?absolute;
????top:?100px;
????left:?100px;
}
#img2{
????position:?absolute;
????opacity:0.1;
????z-index:?1;
}
#img1{
????position:?absolute;
????z-index:?5;
????clip:?rect(0px?0px?50px?50px);
}
#select{
????height:?50px;
????width:?50px;
????position:?absolute;
????z-index:2;
????border:?1px?solid?#f00;
}<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
????<link?rel="stylesheet"?type="text/css"?href="css/ClipWithJS.css"/>
</head>
<body>
????<div?id="cn">
????????<img?id="img2"?src="images/bg2.jpg"?/>
????????<img?id="img1"?src="images/bg1.jpg"?/>
????????<div?id="select">
????????</div>
????</div>
</body>
<script?type="text/javascript">
</script>
</html>圖片大小均一樣大，width=430px, height=260px測試效果發現設置clip圖片1就不顯示不設置clip圖片1才會壓在圖片2上不知道原因何在，我估計是clip設置的問題
已經設置了absolute絕對定位，但clip屬性設置仍無效
小王子抓貓咪
2015-09-05 15:53:41
