如何实现div内部区块透显后方背景图片的效果

问题原因 #

• 子元素设置background-color: transparent仍显示白色：通常是中间父级.block设置了不透明的纯白色背景，透明子元素仅能透出直接父级的背景色，无法直接穿透到更外层的.bg容器。
• z-index调整失效/内容被覆盖：z-index仅对position属性非static的元素生效，若给底层背景容器设置过高的z-index，会导致背景盖到上层文字内容。

实现代码 #

HTML（和你现有结构一致，无需修改） #

<div class="bg">
    <div class="block">
        <h1 class="block__title">Rock climbing in Yosemite</h1>
        <div class="block__transparent"></div>
        <p class="block__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et...</p>
    </div>               
</div>

CSS 核心实现 #

/* 外层背景容器 */
.bg {
    width: 100%;
    min-height: 100vh;
    /* 替换为你的实际背景图地址 */
    background: url("背景图链接") center/cover no-repeat;
    padding: 2rem;
    box-sizing: border-box;
}

/* 中间内容容器 */
.block {
    max-width: 600px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    /* 不要设置实心白色背景，如需半透背景用rgba */
    background: rgba(255, 255, 255, 0.85);
}

/* 标题、文字的基础样式可自行补充 */
.block__title, .block__text {
    padding: 1rem 1.5rem;
    margin: 0;
}

/* 需要透显背景的目标区块 */
.block__transparent {
    height: 200px; /* 按需调整高度 */
    /* 核心属性：继承外层背景 + 固定背景对齐 */
    background: inherit;
    background-attachment: fixed;
    /* 如需磨砂玻璃效果可追加以下属性，不需要就删除 */
    /* backdrop-filter: blur(6px); */
}

可选优化方案 #

如果你的背景图需要滚动而非固定，可以用CSS变量同步背景位置，避免background-attachment: fixed在部分移动端设备的兼容问题：

.bg {
    --bg-x: center;
    --bg-y: center;
    background: url("背景图链接") var(--bg-x) var(--bg-y)/cover no-repeat;
}
.block__transparent {
    background: inherit;
    background-position: var(--bg-x) var(--bg-y);
    background-size: 100vw 100vh; /* 和外层bg的尺寸保持一致 */
}

内容的提问来源于stack exchange，提问作者benjaminli75