Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to achieve the effect of hollowed-out cover layer in HTML". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve the effect of hollowed-out cover layer in HTML" can help you solve your doubts.

First of all, the content is covered with a translucent cover with a style, in which an area is hollowed out.

DIV splicing

The most primitive method, around the hollowed-out area spliced 4 div, splicing in many ways, such as the above picture with different colors to represent 4 div.

.item-1, .item-2, .item-3, .item-4 {

Position: absolute

}

.item-1 {

Top: 0; left: 0

Background: rgba (0,0,0,0.5)

Width: 450; height: 100px

}

.item-2 {

Top: 0; left: 450; right: 0

Height: 300px

Background: rgba (0,0,0,0.5)

}

.item-3 {

Top: 300px; left: 150px; bottom: 0; right: 0

Background: rgba (0,0,0,0.5)

}

.item-4 {

Top:100px; left: 0; bottom: 0

Width: 150px

Background: rgba (0,0,0,0.5)

}

The advantage is good compatibility, but the disadvantage is that multiple DOM elements are used to construct the cover layer, which is troublesome to calculate, and the hollowed-out area can only be rectangular.

Border

The box model includes content and border. The hollowed-out area can be represented by content and the masking layer can be represented by border, and the location of the hollowed-out area can be located by border-width. It is similar to the above method.

. rect-border {

Position: fixed

Top: 0; left: 0

Width: 300px

Height: 200px

Border-style: solid

Border-color: rgba (0,0,0,0.5)

Border-top-width: 100px

Border-right-width: calc (100vw-450px)

Border-bottom-width: calc (100vh-300px)

Border-left-width: 150px

}

Using this method requires calculation, JS is also required in some cases, and the hollowed-out area can only be rectangular (without gradients, of course).

Outline

Outline does not take up space, does not affect its own elements and other elements, and can be used as a masking layer by setting a large enough value for it.

. rect-outline {

Position: absolute

Left: 150px

Top: 100px

Width: 300px

Height: 200px

Outline: 3000px solid rgba (0,0,0,0.5)

}

The advantage is simple and convenient, but the hollowed-out area can only be rectangular.

Box-shadow

Like outline, box-shadow also does not affect the size and position of elements.

. rect-shadow {

Position: absolute

Left: 150px

Top: 100px

Width: 300px

Height: 200px

Border-radius: 10px

Box-shadow: 000 3000px rgba (0,0,0,0.5)

}

What is better than the above method is that the element setting border-radius is effective, so the hollowed-out area can be rounded rectangle, ellipse, circle, and so on.

Mix-blend-mode

Using mixed mode, you can make the superimposed part of the element and the parent element transparent, get rid of the restrictions of a single element, make the hollowed-out area freer and do more complex graphics, such as dialog bubble boxes.

.overlay {

Position: absolute

Top: 0; right: 0; bottom: 0; left: 0

Z-index: 99999

Background-color: rgba (0,0,0,0.5)

Mix-blend-mode: hard-light

Pointer-events: auto

}

.spoltlight {

Position: absolute

Left: 150px

Top: 100px

Width: 300px

Height: 200px

Border-radius: 10px

Background-color: gray

}

.spoltlight:: after {

Content: ""

Position: absolute

Top: 100%

Right: 50px

Border: 15px solid transparent

Border-top-color: gray

}

In many scenarios, you also need to click and select the DOM under the hollowed-out area.

With the DIV stitching method, the hollowed-out area is already empty, so you can directly operate on the following DOM.

Other methods, because there is a real DOM overlay on top of the content, use pointer-events:none so that mouse events can "penetrate" the element on the following content.

Most scenes need to prevent the operation of the DOM under the masking part, and only "penetrate" the hollowed-out part, so you cannot set pointer-events:none directly to the hollowed-out cover layer. Instead, you should set pointer-events:none when the mouse moves over the hollowed-out area, and set pointer-events:auto when you leave the hollowed-out area. Note that you cannot listen to mosuemove on the hollowed-out masking layer, because when it is set to pointer-events:none, you cannot listen.

For outline and box-shadow, because they themselves do not occupy space, mouse events have no effect on them and have their own "penetration" effect, so in addition to setting pointer-events:none for the hollowed-out mask layer, you also need to cover a transparent mask layer, also listen for the mousemove event of the parent container, and dynamically set pointer-events for the transparent layer.

The mixed mode method originally thought that the pointer-events could be controlled by listening to the mouseenter and mouseleave of hollowed-out elements, but also when pointer-events:none could not monitor mouse events, so it could only be judged by mouse coordinates.

In some scenarios, such as imitating the Snipaste screenshot effect, you need to listen for mouse entry and exit events for all elements under the mask layer, and then set pointer-events:none for the entire hollowed-out mask layer.

After reading this, the article "how to achieve the effect of hollowed-out cover layer in HTML" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.