body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* 防止页面滚动 */
}

.full-screen-image {
    height: 100vh; /* 视口高度 */
    width: 100%;   /* 使用宽度100%以确保覆盖整个视口宽度 */
    background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
    background-size: cover; /* 图片覆盖整个容器 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 图片不重复 */
    position: relative; /* 为遮罩层提供定位上下文 */
}

.overlay {
    position: absolute; /* 绝对定位以覆盖背景图片 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
    color: white; /* 文本颜色为白色 */
    display: flex; /* 使用Flexbox布局 */
    flex-direction: column; /* 垂直排列元素 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 文本居中 */
}

h1 {
    font-size: 3rem; /* 标题字体大小 */
    margin: 0; /* 移除默认外边距 */
}

p {
    font-size: 1.5rem; /* 段落字体大小 */
    margin: 1rem 0 0; /* 段落上边距，移除下边距 */
}

h1 {
    font-size: 3rem; /* 标题字体大小 */
    margin: 0; /* 移除默认外边距 */
    color: #ffffff; /* 确保标题颜色为白色，与遮罩层形成对比 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 添加文本阴影以增强可读性 */
}

p {
    font-size: 1.5rem; /* 段落字体大小 */
    margin: 1rem 0 0; /* 段落上边距，移除下边距 */
    color: #e0e0e0; /* 段落颜色稍浅，与标题形成对比 */
}

footer {
    background-color: #f8f9fa; /* 页脚背景色 */
    padding: 20px 0; /* 页脚内边距 */
    text-align: center; /* 文本居中 */
    color: #6c757d; /* 文本颜色 */
    font-size: 0.9rem; /* 字体大小 */
}

footer p {
    margin: 0; /* 移除段落的外边距 */
}

/* 重置浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置主体背景颜色和字体颜色 */


/* ...（其他之前的CSS代码，如全屏图像、遮罩层等）... */

/* 页脚样式 */
footer {

    padding: 10px 0;
    text-align: center;
    color: #fff; /* 白色字体以确保清晰可见 */
    position: fixed; /* 使页脚固定在页面底部 */
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}