本文介绍了如何结合JavaScript和CSS的clip属性来实现在单页Web应用中截取图片的功能。通过设置元素的位置、尺寸和透明度，以及利用绝对定位和裁剪区域，可以创建一个可拖动调整的图片截取框。同时，通过添加不同方向的调整手柄，实现了多方向的大小调整，从而提供了一种灵活的图片裁剪解决方案。
top: 200px;
left: 1250px;
width: 1024px;
height: 709px;
z-index: -999;
}
#img1, #img2, #img3 {
position: absolute;
top: 0;
left: 0;
}
#img1 {
opacity: 0.3;
}
#img2, #img3 {
clip: rect(0, 200px, 200px, 0);
}
#main {
position: relative;
width: 200px;
height: 200px;
border: 1px solid white;
cursor: move;
}
.left1, .left2, .left3, .center1, .center2, .right1, .right2, .right3 {
width: 7px;
height: 7px;
background: white;
position: absolute;
transform: translate(-50%, -50%);
}
.left1 {
top: 0;left: 0;cursor: nw-resize;
}
.left2 {
top: 50%;left: 0;cursor: w-resize;
}
.left3 {
top: 100%;left: 0;cursor: sw-resize;
}
最低0.47元/天 解锁文章
1247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
