Various ways to achieve the hollowing effect of CSS3 mask layer

This article introduces 4 methods to achieve mask layer hollowing. Share it with everyone and leave a note for yourself. The details are as follows:

Let’s take a look at the effect first

【Method 1: Screenshot simulation implementation】

Principle: First take a picture of the same position, create a mask layer, and then position the picture at the corresponding position.

Advantages: simple principle; good compatibility, compatible with IE6 and IE7; can hollow out multiple items 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 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;
}

【Method 2: CSS3 shadow property implementation】

Principle: Use the shadow property of CSS3.

Advantages: easy to implement; suitable for any page and not restricted by the page.

Disadvantages: The compatibility is not very good, 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 100vh;
}

[Method 3: CSS border property implementation]

Principle: Use border properties. First, an empty box is positioned in the target area, and then filled with a border around it.

Advantages: easy to implement, good compatibility, compatible with IE6 and IE7; suitable for any page and not restricted by the page.

Disadvantages: The compatibility implementation process is relatively complicated.

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: Multiple can be hollowed out at the same time.

Disadvantages: poor compatibility and relatively complicated implementation process.

I take SVG as an example, 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>

This concludes this article on various ways to achieve the CSS3 mask layer hollowing effect. For more relevant CSS3 mask layer hollowing content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!