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
Steps for IDEA to integrate Docker to achieve remote deployment
1. Enable remote access to the docker server Log ...
Detailed explanation of gantt chart draggable and editable (highcharts can be used for vue and react)
Preface Excel is powerful and widely used. With t...
Detailed code for building a multi-person video chat service based on webrtc on Ubuntu
WebRTC, which stands for Web Real-Time Communicat...
Example of how to deploy a Django project using Docker
It is also very simple to deploy Django projects ...
How to use MySQL covering index and table return
Two major categories of indexes Storage engine us...
How to quickly install nginx under Windows and configure it to start automatically
Table of contents 1. Nginx installation and start...
Summary of pitfalls in virtualbox centos7 nat+host-only networking
Table of contents 1. Problem Background 2. What a...
HTML user registration page settings source code
Design the web page shown above: <!DOCTYPE htm...
Vue realizes simple effect of running light
This article shares the specific code of Vue to a...
Distributed monitoring system Zabbix uses SNMP and JMX channels to collect data
In the previous article, we learned about the pas...
Detailed explanation of the difference between uniapp and vue
Table of contents 1. Simple page example 2.uni-ap...
Vue custom instructions to achieve pop-up window drag four-side stretching and diagonal stretching effect
introduction The company's recent Vue front-e...
Web Design Experience: Efficiently Writing Web Code
Originally, this seventh chapter should be a deep ...
HTML elements (tags) and their usage
a : Indicates the starting or destination positio...
MySQL 8.0.16 installation and configuration graphic tutorial under macOS
This article shares the installation and configur...