How can I create a hole in an overlay to reveal the content beneath it using only CSS?

Mask Layer Holes in CSS

Creating mask layers on a website and preserving the visibility of the underlying content is a common need. This article explores how to achieve this effect with pure CSS.

Question

How to create a hole in the mask layer so that the user can see the content of the underlying website through the mask layer?

CSS Solution

Use the box-shadow property to create holes in the mask layer. This property allows the creation of a shadow around an element, spreading a very large shadow can create an essentially transparent area.

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

As shown above, we set the expansion radius to a very large value (9999px). This will create a shadow that covers almost the entire mask layer, while preserving the transparent area in the center of the mask layer.

Code Example

#underground {
  background-color: #725;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#overlay #center {
  width: 400px;
  height: 200px;
  background-color: #ABD;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  border-width: 100%;
  border-color: #FFF;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<div>

Conclusion

By using the box-shadow property, we successfully created a hole in the mask layer. This technique gives developers the flexibility to create mask layers while maintaining visibility of underlying content, expanding the possibilities of CSS.

The above is the detailed content of How can I create a hole in an overlay to reveal the content beneath it using only CSS?. For more information, please follow other related articles on the PHP Chinese website!