前言
这拗口的标题令我自己都不知所措，换一种方式来说，在截图时，我们会发现，我们除了我们选中的截图区域外，都是有阴影遮罩层的。而选中的区域，就是正常显示，那么在页面中，该怎么实现这种布局方式呢？
开始
首先，由于截图的区域是可以缩小放大并且移动的，所以我们默认知道移动区域的位置和宽高，所以接下来的例子都是默认以固定宽高作为实例，实际使用时肯定还要配合相应的逻辑。
1.使用clip-path
产生的结果如图所示，使用clip-path就是在shadow的阴影背景中裁剪出一个中间空心的矩形，剩下的部分还是rgba(0, 0, 0, .6)。然后将裁剪框绝对定位到中间空心的矩形，实现页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
width: 500px;
height: 500px;
position: relative;
}
.container {
width: 500px;
height: 500px;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
clip-path: polygon(evenodd, 0 0, 0 500px, 500px 500px, 500px 0, 0 0,
100px 100px, 100px 400px, 400px 400px, 400px 100px, 100px 100px);
top: 0;
left: 0;
}
.crop {
width: 300px;
height: 300px;
position: absolute;
box-sizing: border-box;
border: 2px solid green;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="back">
<div class="container">
<img src="./logo-alt.png" width="100%" height="100%" >
</div>
<div class="shadow"></div>
<div class="crop"></div>
</div>
</body>
</html>
2.使用双层div布局
首先下层是我们完整的图片，然后拥有正常的阴影遮罩，但是而上层的裁剪框中，也放置了我们完整的图片，由于裁剪框有宽高限制，只能显示一部分的图片，因为只要将图片translate进行相应的移动，与裁剪框的偏移位置一致，就能展示出下层对应位置的图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
vertical-align: middle;
}
.main {
width: 500px;
height: 500px;
position: relative;
}
.img-container {
width: 100%;
height: 100%;
}
.crop-div {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
top: 0;
left: 0;
}
.crop-img {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
overflow: hidden;
border: 2px solid green;
background: #fff;
}
.crop-img img {
transform: translate(-100px, -100px);
}
</style>
</head>
<body>
<div class="main">
<div class="img-container">
<img src="./logo-alt.png" width="500" height="500" >
</div>
<div class="crop-div">
<div class="crop-img">
<img src="./logo-alt.png" width="500" height="500" >
</div>
</div>
</div>
</body>
</html>
结语
最开始想过用canvas，但是仔细思考了下，感觉使用canvas并没有使问题变得更加简单，之后有空了也会去尝试一下。还有一开始也并没有想到第二种方式，我想到的只是老老实实分成5部分布局，把中间的区域留出来进行计算，吃力不讨好，最终请教了其他大佬才写出的例子。可能还是因为思维不够灵敏，在布局的考虑的经验上还是不足。以后还是要多多思考，多多发现问题。还有，如果大家有其他更好的方法，麻烦也请告诉我一下~
谢谢大家。大家可以关注我的，微信公众号——懒狗小前端；
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！