How to implement a full screen mask layout using HTML and CSS-HTML Tutorial-php.cn

How to implement a full screen mask layout using HTML and CSS

王林

Release： 2023-10-20 15:46:55

Original

941 people have browsed it

How to implement a full screen mask layout using HTML and CSS

Implementing a full-screen mask layout is one of the common requirements in web design, which can add a strong sense of mystery and unique effects to the web page. In this article, HTML and CSS will be used to implement a simple full-screen mask layout, and specific code examples will be given.

First, let's create the HTML structure. In the HTML file, we will use a div element as a container for the mask and add content inside it, as shown below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全屏遮罩布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="mask">
        <h1>Welcome to My Website</h1>
        <p>This is a sample text.</p>
    </div>
</body>
</html>

Copy after login

In the above code, we create a div element and the class attribute is Set to "mask" to add styles to the mask.

Next, let’s write CSS styles to implement full-screen mask layout. In the CSS file, we will use the pseudo class: before to create a background that covers the entire screen, and use flexbox to center the content vertically and horizontally on the screen. The code is as follows:

body, html {
    height: 100%;
}

.mask {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mask:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩的颜色和透明度 */
    z-index: -1; /* 将遮罩层置于下方 */
}

h1, p {
    color: #fff;
    text-align: center;
}

Copy after login

In the above code, we set the height to 100% for the body and html elements respectively, so that the mask layout can occupy the entire screen space.

In the .mask class, we set the display: flex; attribute so that its internal content can be centered vertically and horizontally. At the same time, in order to achieve the mask effect, we use the :before pseudo-class to create an absolutely positioned full-screen background, and set its z-index attribute to -1 so that it is located at the bottom of the mask layout. You can control the appearance of the mask effect by setting the background color and transparency of the background.

Finally, we set the color of h1 and p elements to white and display them in the center.

By running the above HTML and CSS code in the browser, you can achieve a simple full-screen mask layout effect.

Summary:
Full-screen mask layout is widely used in web design and can add a special effect to web pages. With code examples written in HTML and CSS, we can easily implement a simple full-screen mask layout. In actual development, the code can be further optimized and customized according to specific needs and design styles.

The above is the detailed content of How to implement a full screen mask layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!