preface
To put it another way, when we take a screenshot, we will see that we have a shadow mask layer except for the screenshot area that we selected. And the selected area, is normal display, so in the page, how to achieve this layout?
start
First of all, since the area in the screenshot can be zoomed in and moved, we know the position and width and height of the moving area by default. Therefore, the following examples take fixed width and height as the default example, which must be coordinated with the corresponding logic in actual use.
1. Use the clip – path
The result is shown in the figure below. Using clip-path is to clip out a hollow rectangle in the middle of the shadow background of the shadow, and the rest is rGBA (0, 0, 0,.6). Then position the clipping box absolutely into a hollow rectangle in the middle to achieve the page layout.
<! 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%" alt=""> </div> <div class="shadow"></div> <div class="crop"></div> </div> </body> </html>Copy the code2. Use a two-layer div layout
First, the lower layer has our complete image, and then the normal shadow mask, but the upper clipping box also has our complete image. Because the clipping box has a width and height limit, only part of the image can be displayed, as long as the image translate is moved accordingly to the offset position of the clipping box. I’ll be able to show you a picture of the lower layer.
<! 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" alt=""> </div> <div class="crop-div"> <div class="crop-img"> <img src="./logo-alt.png" width="500" height="500" alt=""> </div> </div> </div> </body> </html>Copy the codeconclusion
At first, I thought about using canvas, but after careful reflection, I feel that canvas does not make the problem easier. I will try it when I have time later. In addition, I did not think of the second way at the beginning. What I thought was to divide the layout into five parts honestly and leave the middle area for calculation, which was a thankless task. Finally, I consulted other leaders to write an example. Perhaps because thinking is not sensitive enough, in the layout of the experience of consideration or lack of. In the future, we should think more and find more problems. Also, if you have other better method, please tell me ~
Thank you. You can pay attention to my wechat public number – lazy dog small front;