Example code for implementing a hollow mask layer with CSS
|
Contents of this article: Page hollow mask layer, page hollow mask guide layer, image hollow mask Regular mask layer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Title</title>
<style>
.mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.mask{
position:fixed;
top : 0;
left : 0;
bottom : 0;
right : 0;
background:rgba(0,0,0,.5);
/*background:hsla(0,100%,80%,0.5)*/
/*background:#000; opacity:0.5; */
}
//Blur effect frosted glass effect.blur{
-webkit-filter: blur(5px); /* Chrome, Opera */
-moz-filter:blur(5px);
-ms-filter:blur(5px);
filter: blur(5px);
}
</style>
</head>
<style>
</style>
<body>
<div class='mask'></div>
</body>
</html>The effect of the hollow mask layer is shown in the figure
Use box-shadow to achieve hollow mask guide layer effect advantage:
Disadvantages: The shadow visible area cannot trigger the click event, so when you click any area of the mask, it cannot be hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Title</title>
<style>
.guide{
position: absolute;
z-index: 2;
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50px;
border: 3px solid #2353FA;
box-shadow: 0px 0px 0px 1000px rgba(0,0,0,.75);
box-sizing: border-box;
}
</style>
</head>
<style>
</style>
<body>
<div class='guide'></div>
</body>
</html>Use border to achieve hollow mask guide layer effect Disadvantages: Large amount of code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Title</title>
<style>
.guide{
position: absolute;
z-index: 2;
.opacityEle{
border: 700px solid rgba(0,0,0,0.75);
width: 50px;
height: 50px;
position: relative;
top: -700px;
left: -538px;
border-radius: 50%;
.ele{
width: 50px;
height: 50px;
border: 3px solid #0B6EFF;
border-radius: 25px;
box-sizing: border-box;
}
}
}
</style>
</head>
<style>
</style>
<body>
<div class='guide'>
<div class='opacityEle'>
<div class='ele'></div>
</div>
</div>
</body>
</html>This concludes this article about the sample code for implementing a hollow mask layer with CSS. For more information on CSS hollow mask layers, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: How to modify the default submission method of the form
Recommend
Button does not specify type as submit. Clicking the button does not jump to the specified URL.
Today, due to project requirements, js is needed t...
How to use docker compose to build fastDFS file server
The previous article introduced a detailed exampl...
Implementing carousel with native JavaScript
This article shares the specific code for impleme...
Docker image import and export code examples
Import and export of Docker images This article i...
Detailed explanation of soft links and hard links in Linux
Table of contents 1. Basic storage of files and d...
MySQL 5.7.18 installation and configuration tutorial under Windows
This article shares the installation and configur...
React internationalization react-intl usage
How to achieve internationalization in React? The...
How to use negative margin technology to achieve average layout in CSS
We usually use float layout to solve the compatib...
Unicode signature BOM detailed description
Unicode Signature BOM - What is the BOM? BOM is th...
Detailed explanation of the solution to font blur when using transform in CSS3
This question is very strange, so I will go strai...
Implementing password box verification information based on JavaScript
This article example shares the specific code of ...
Analyzing ab performance test results under Apache
I have always used Loadrunner to do performance t...
Vue implements tree table through element tree control
Table of contents Implementation effect diagram I...
Detailed explanation of the points that need to be paid attention to in HTML standards that comply with W3C standards
XML/HTML CodeCopy content to clipboard <!DOCTY...
Detailed steps for installing and configuring mysql 5.6.21
1. Overview MySQL version: 5.6.21 Download addres...