css 遮罩层

作者：魔影杀戮发布日期:2025-07-14 浏览:30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 遮罩层示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 50px auto;
            overflow: hidden;
        }
        .image {
            width: 100%;
            height: 100%;
            background: url('https://via.placeholder.com/300x200') no-repeat center center;
            background-size: cover;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .container:hover .overlay {
            opacity: 1;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="image"></div>
    <div class="overlay">
        <p>这是遮罩层的内容</p>
    </div>
</div>

</body>
</html>

解释说明：

HTML 结构:
- container 是一个相对定位的容器，用于包含图片和遮罩层。
- image 是背景图片，使用 CSS 的 background 属性设置。
- overlay 是绝对定位的遮罩层，覆盖在图片上。
CSS 样式:
- overlay 初始状态下是透明的（opacity: 0），当鼠标悬停在 container 上时，遮罩层会逐渐显示（opacity: 1）。
- 遮罩层的颜色为半透明黑色（rgba(0, 0, 0, 0.5)），并且居中显示文字内容。
交互效果:
- 当用户将鼠标悬停在图片上时，遮罩层会渐现，并显示其中的文字内容。

上一篇：css initial

下一篇：opacity在css中的用法