A variety of methods to realize the hollowing effect of mask layer

Time:2020-5-25

Let’s see the effect first

A variety of methods to realize the hollowing effect of mask layer

[method 1: screenshot simulation implementation]

Principle: first cut a picture in the same position, create a mask layer, and then locate the picture in the corresponding position.

Advantages: simple principle; good compatibility, can be compatible with IE6 and IE7; can achieve multiple hollows at the same time.

Disadvantages: this method is only suitable for static pages, not for scrollable pages. It is also not suitable for pages whose content will change.

The code is as follows:
<div class="class1">
    <img/>
</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;
}

[method 2: CSS3 shadow attribute implementation]

Principle: use the shadow property of CSS3.

Advantages: easy to implement; suitable for any page, not limited by the page.

Disadvantages: compatibility is not good, only compatible to 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  100vh;
}

[method 3: CSS border attribute implementation]

Principle: use border attributes. First position an empty box in the target area, then fill it with a border around it.

Advantages: convenient implementation, good compatibility, can be compatible to IE6, IE7; suitable for any page, not limited by the page.

Disadvantages: the process of 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,0,.6);
      border-right-width:970px;
      border-right-style: solid;
      border-right-color:rgba(0,0,0,.6);
      border-top-width:260px;
      border-top-style: solid;
      border-top-color:rgba(0,0,0,.6);
      border-bottom-width:253px;
      border-bottom-style: solid;
      border-bottom-color:rgba(0,0,0,.6);
}

[method 4: SVG or canvas]

Principle: use the drawing function of SVG or canvas.

Advantages: it can cut out multiple holes at the same time.

Disadvantages: poor compatibility and relatively complex implementation process.

I take SVG as an example, and the code is as follows:
<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>

Recommended Today

Hot! Front and rear learning routes of GitHub target 144K

Hello, Sifu’s little friend. I’m silent Wang Er. Last week, while appreciating teacher Ruan Yifeng’s science and technology weekly, I found a powerful learning route, which has been marked with 144K on GitHub. It’s very popular. It covers not only the front-end and back-end learning routes, but also the operation and maintenance learning routes. As […]