Several methods to realize the effect of the mask layer of CSS3

Time:2021-5-1

This paper introduces four methods to realize the mask layer hollowing out. I share them with you and leave a note for myself. The details are as follows:

Let’s see the effect first

[method 1: implementation of screenshot simulation]

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

Advantages: simple principle; Good compatibility, compatible with IE6 and IE7; It can realize multiple hollowing 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: implementation of CSS3 shadow attribute]

Principle: using the shadow property of CSS3.

Advantages: convenient implementation; Suitable for any page, not limited by the page.

Disadvantages: not very compatible, 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: implementation of CSS border attribute  】

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

Advantages: easy to implement, good compatibility, can be compatible with IE6, IE7; Suitable for any page, not limited by the page.

Disadvantages: to do compatible implementation process 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: can be hollowed out at the same time.

Disadvantages: poor compatibility, the implementation process is relatively complex.

Taking 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>

So far, this article about various implementation methods of CSS3 mask layer hollowing effect is introduced here. For more relevant CSS3 mask layer hollowing content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]