如何阻止子div继承父元素背景？实现透明或继承祖父元素背景

针对你的需求，这里提供两种方向的实现方案：

方案1：让.child背景为红色（不直接设置background-color: red） #

通过CSS变量间接引用.grands的背景色，避免直接在.child中写死红色：

<div class="grands">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

.grands{
    width: 80vw;
    height: 80vh;
    --main-bg: red; /* 定义全局背景变量 */
    background-color: var(--main-bg);
}
.parent{
    display: flex;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, pink 4%, blue 88%);
}
.child{
    width: 40%;
    height: 40%;
    border-radius: 50%;
    border: 4px solid blue;
    background-color: var(--main-bg); /* 引用变量，未直接指定红色 */
    margin: auto;
}

方案2：让.child透明，透过它看到.grands的红色背景 #

由于.parent的渐变背景遮挡了底层的.grands红色，需要让.parent在.child的位置"镂空"，透出底层颜色。这里用CSS mask实现：

<div class="grands">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

.grands{
    width: 80vw;
    height: 80vh;
    background-color: red;
}
.parent{
    display: flex;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, pink 4%, blue 88%);
    /* 创建圆形镂空，尺寸与child一致，位置居中 */
    mask: radial-gradient(circle, transparent 40%, black 40%);
    mask-size: 40% 40%;
    mask-position: center;
    mask-repeat: no-repeat;
}
.child{
    width: 40%;
    height: 40%;
    border-radius: 50%;
    border: 4px solid blue;
    background-color: transparent; /* 显式设置透明（默认也是透明） */
    margin: auto;
}

如果不需要保留.parent的渐变背景，也可以直接将.parent的背景设为透明，这样child默认透明就能看到.grands的红色：

.grands{
    width: 80vw;
    height: 80vh;
    background-color: red;
}
.parent{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: transparent; /* 移除渐变，设为透明 */
}
.child{
    width: 40%;
    height: 40%;
    border-radius: 50%;
    border: 4px solid blue;
    margin: auto;
}

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