*{ 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设置的问题
echo_kinchao