This is the sixth day of my participation in the More text Challenge. For details, see more text Challenge

In front end development, we sometimes do the page mask layer hollowing effect, so what is the page mask layer hollowing effect, let’s take a look at the following effect. Here’s what I’ve done in real life:

Here are some things to note when doing this effect:

Compatible with Internet Explorer 7 and above;

2, the page background is changing at any time;

3. The size of the target area is not fixed;

4, regular browser to achieve the effect of rounded corners.

Upon receiving the task, the first method I thought was to cut a picture and put it on a black transparent mask layer to simulate the hollow-out effect, but it did not meet the requirements of the second and third above. Instead, I came up with the idea of using SVG, but it didn’t meet the first requirement above. Finally, I use the border attribute of CSS combined with JS to achieve the above method, and meet all the requirements, the specific method is shown in the following method three.

I have listed several ways to achieve the hollowing effect of the page mask layer. So far I have mastered four of them.

Method 1: screenshot simulation implementation

How it works: Take an image in the same position, create a mask, and position the image in the same position. Advantages: Simple principle; Good compatibility, can be compatible to IE6, IE7; Multiple hollows can be achieved at the same time. Disadvantages: This method is only suitable for static pages, not for pages that can be scrolled. It’s also not suitable for pages where the content changes. The code is as follows:

<div class="class1"><img src="images/000.jpg" alt=""/></div> .class1{ position: absolute; width:100%; height:100%; top: 0; left: 0; background-color: #000; Opacity: 0.6; filter:alpha(opacity=60); } .class1 img{ position: absolute; top:260px; left: 208px; }Copy the code

Method two: CSS3 shadow attribute implementation

How it works: Use CSS3’s shadow properties. Advantages: convenient implementation; Fit on any page, not restricted by the page. Cons: Not very compatible, only compatible with IE9. The code is as follows:

<div class="class2"></div> .class2{ position: absolute; width:170px; height:190px; top: 260px; left: 208px; Box-shadow: rgba(0,0,0,.6) 0 0 0 1366px; }Copy the code

Method three: CSS border property implementation

How it works: Take advantage of the border property. Place an empty box in the target area and fill it with a border around it. Advantages: convenient implementation, good compatibility, can be compatible to IE6, IE7; Fit on any page, not restricted by the page. Disadvantages: Compatibility implementation is relatively complex. The code is as follows:

<div class="class3"></div> .class3{ position: absolute; width:170px; height:190px; top: 0; left: 0; border-left-width:208px; border-left-style: solid; Border - left - color: rgba (0, 0,. 6); border-right-width:970px; border-right-style: solid; Border - right - color: rgba (0, 0,. 6); border-top-width:260px; border-top-style: solid; Border - top - color: rgba (0, 0,. 6); border-bottom-width:253px; border-bottom-style: solid; Border - bottom - color: rgba (0, 0,. 6); }Copy the code

Method 4: SVG or Canvas

How it works: Leverage the drawing capabilities of SVG or Canvas. Advantages: you can hollow out more than one at the same time. Disadvantages: Poor compatibility, relatively complex implementation process. I’ll take SVG as an example, and the code looks like this:

<svg style="position: absolute;" width="1366" height="700">
    <defs>
        <mask id="myMask">
            <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
            <rect id="circle1" width="170" height="190" x='208' y="260" style="fill: #000" />
        </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: rgba(0, 0, 0, 0.6); mask: url(#myMask)"></rect>
</svg>
Copy the code

The result of these four methods is the same across major browsers. Of course, this is just an example, to apply to the project, there are a lot of work to do, such as the location of the holloweout we should be automatically obtained according to the goal, the size is also set according to the goal, with the border method to be compatible with IE7, 8, but also need to add a layer to achieve.