查看“︁模板:PageBanner/styles.css”︁的源代码

/* Banner 容器 */
.page-banner {
    position: relative;
    width: 100%;
    height: 300px; /* 横幅高度，可根据喜好调整 */
    margin-top: -1.5rem; /* 抵消 Citizen 默认的边距，让它贴顶 */
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* 文字对齐到底部 */
    background-color: #333;
}

/* 背景图片 */
.page-banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* 渐变遮罩，确保文字清晰 */
.page-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

/* 文字容器 */
.page-banner-content {
    position: relative;
    z-index: 3;
    padding: 20px 40px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.page-banner-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

.page-banner-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* 适配移动端 */
@media (max-width: 720px) {
    .page-banner { height: 200px; }
    .page-banner-title { font-size: 1.8rem; }
}