如何为<div>添加模糊背景且不模糊内部内容？

问题核心在于**filter: blur()会作用于元素本身及其所有子元素**，你把内容层.guild-banner嵌套在加了模糊效果的.guild-background-logo内部，导致内容也被模糊。只需调整DOM层级，让背景层和内容层同级，通过定位实现层叠即可解决。

修改后的HTML代码 #

<div class="guild-banner-container">
    <div class="guild-background-logo" style="background: url('dum-guild.png')"></div>
    <div class="guild-banner">
        <img src="dum-guild.png" alt="guild logo" class="big-guild-logo">
        <div>
            <h3 class="common-text guild-title">Challenge Saber</h3>
            <p class="common-text">Who’s the best in their category? Come to find out! <br> Features: Tech, Speed, Floor, Vibro, Techy Vibro, Stamina, Shitpost, Spirals...</p>
        </div>
        <div>
            <div id="member-count-container">
                <p class="common-text">120</p>
                <img src="user.png" alt="user-img">
            </div>
            <div>
                <p class="common-text">25</p>
                <img src="favorite.png" alt="fav-img">
            </div>
            <div><button class="join-button">join request</button></div>
        </div>
    </div>
</div>

修改后的CSS代码 #

.guild-banner-container {
    position: relative; /* 让子元素的绝对定位基于该容器 */
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 10px;
    width: 100%;
    height: 170px;
}

.guild-background-logo {
    position: absolute; /* 脱离文档流，撑满容器 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(20px);
    transform: scale(1.1); /* 解决模糊后边缘出现空白的问题 */
}

.guild-banner {
    position: relative; /* 确保内容层在背景层上方 */
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    padding: 16px;
    width: 100%;
    height: 100%;
}

关键修改说明 #

1. DOM层级调整：将.guild-banner从.guild-background-logo中移出，两者成为同级子元素，彻底避免filter对内容的影响。
2. 定位逻辑设置：父容器加position: relative作为定位基准；背景层用绝对定位撑满容器；内容层通过position: relative和z-index: 1确保显示在背景之上。
3. 模糊边缘优化：背景层添加transform: scale(1.1)，抵消模糊效果带来的容器边缘空白问题。

修改完成后，背景图会被模糊处理，所有内容元素保持清晰，同时原容器的圆角和溢出限制依然生效。

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