HTML と CSS を使用して全画面マスクレイアウトを実装する方法-htmlチュートリアル-php.cn

HTML と CSS を使用して全画面マスクレイアウトを実装する方法

王林

リリース： 2023-10-20 15:46:55

オリジナル

1020 人が閲覧しました

HTML と CSS を使用して全画面マスクレイアウトを実装する方法

全画面マスクレイアウトの実装は、Web デザインにおける一般的な要件の 1 つであり、Web ページに強い神秘性と独特の効果を加えることができます。この記事では、HTML と CSS を使用して簡単な全画面マスクレイアウトを実装し、具体的なコード例を示します。

まず、HTML 構造を作成しましょう。以下に示すように、HTML ファイルでは div 要素をマスクのコンテナとして使用し、その中にコンテンツを追加します。

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

ログイン後にコピー

上記のコードでは、div 要素を作成し、class 属性は Set です。「マスク」にスタイルを追加します。

次に、全画面マスクレイアウトを実装するための CSS スタイルを記述しましょう。 CSS ファイルでは、擬似クラス: を使用して画面全体を覆う背景を作成し、フレックスボックスを使用してコンテンツを画面の垂直方向と水平方向の中央に配置します。コードは次のとおりです。

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

ログイン後にコピー

上記のコードでは、マスクレイアウトが画面スペース全体を占めることができるように、body 要素と html 要素の高さをそれぞれ 100% に設定します。

.mask クラスで display: flex; 属性を設定して、内部コンテンツを垂直方向と水平方向の中央に配置できるようにします。同時に、マスク効果を実現するために、:before 疑似クラスを使用して絶対位置の全画面背景を作成し、その z-index 属性を -1 に設定して、その背景が画面の下部に配置されるようにします。マスクのレイアウト。背景色と背景の透明度を設定することで、マスク効果の外観を制御できます。

最後に、h1要素とp要素の色を白にして中央に表示します。

上記の HTML および CSS コードをブラウザーで実行すると、シンプルな全画面マスクレイアウト効果を実現できます。

概要:
全画面マスクレイアウトは Web デザインで広く使用されており、Web ページに特殊効果を追加できます。 HTML と CSS で記述されたコード例を使用すると、シンプルな全画面マスクレイアウトを簡単に実装できます。実際の開発では、特定のニーズや設計スタイルに応じてコードをさらに最適化およびカスタマイズできます。

以上がHTML と CSS を使用して全画面マスクレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。