*{
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设置的问题
添加回答
举报
0/150
提交
取消