Comment implémenter une disposition de masque plein écran en utilisant HTML et CSS-tutoriel HTML-php.cn

Comment implémenter une disposition de masque plein écran en utilisant HTML et CSS

王林

Libérer： 2023-10-20 15:46:55

original

1009 Les gens l'ont consulté

Comment implémenter une disposition de masque plein écran en utilisant HTML et CSS

La mise en œuvre d'une disposition de masque plein écran est l'une des exigences courantes en matière de conception Web, ce qui peut ajouter un fort sentiment de mystère et des effets uniques à la page Web. Dans cet article, HTML et CSS seront utilisés pour implémenter une disposition simple de masque plein écran, et des exemples de code spécifiques seront donnés.

Tout d’abord, créons la structure HTML. Dans le fichier HTML, nous utiliserons un élément div comme conteneur pour le masque et ajouterons du contenu à l'intérieur, comme indiqué ci-dessous :

<!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>

Copier après la connexion

Dans le code ci-dessus, nous avons créé un élément div avec l'attribut de classe défini sur "mask", utilisé pour ajouter des styles aux masques.

Ensuite, écrivons des styles CSS pour implémenter la disposition des masques plein écran. Dans le fichier CSS, nous utiliserons la pseudo classe : before pour créer un arrière-plan qui couvre tout l'écran, et utiliserons flexbox pour centrer le contenu verticalement et horizontalement sur l'écran. Le code est le suivant :

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;
}

Copier après la connexion

Dans le code ci-dessus, nous définissons respectivement la hauteur à 100 % pour les éléments body et html, afin que la disposition du masque puisse occuper tout l'espace de l'écran.

Dans la classe .mask, nous définissons l'attribut display: flex; afin que le contenu qu'il contient puisse être centré verticalement et horizontalement. En même temps, afin d'obtenir l'effet de masque, nous utilisons la pseudo-classe :before pour créer un arrière-plan plein écran positionné de manière absolue et définissons son attribut z-index sur -1 afin qu'il soit situé en bas de la disposition du masque. Vous pouvez contrôler l'apparence de l'effet de masque en définissant la couleur d'arrière-plan et la transparence de l'arrière-plan.

Enfin, nous définissons la couleur des éléments h1 et p sur blanc et les centrons.

En exécutant le code HTML et CSS ci-dessus dans le navigateur, vous pouvez obtenir un simple effet de mise en page de masque plein écran.

Résumé :
La disposition du masque plein écran est largement utilisée dans la conception Web et peut ajouter un effet spécial aux pages Web. Avec des exemples de code écrits en HTML et CSS, nous pouvons facilement implémenter une simple disposition de masque plein écran. En cours de développement, le code peut être encore optimisé et personnalisé en fonction de besoins spécifiques et de styles de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!