如何让父div内的模糊图片与span居中且span覆盖图片？

要让span覆盖在模糊图片上方并同时居中，核心是通过定位实现层级覆盖，结合样式完成居中对齐。具体调整如下：

关键修改点 #

1. 给包裹图片和span的父容器.thumbnail添加position: relative，让内部绝对定位元素以它为参照基准
2. 给span设置绝对定位，利用Bootstrap工具类或自定义样式实现水平垂直居中

修改后的完整代码 #

CSS #

.thumbnail {
    height: 10em;
    width: 10em;
    background-size: cover;
    position: relative; /* 开启相对定位，作为子元素绝对定位的参照 */
}

.sensitive {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="folder row justify-content-md-center mt-4">
    <div class="col col-md-2 d-flex justify-content-md-center">
        <div class="thumbnail overflow-hidden">
            <div class="thumbnail sensitive" style="background-image:url('https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png')">
            </div>
            <!-- 用Bootstrap工具类实现绝对定位居中 -->
            <span class="position-absolute top-50 start-50 translate-middle text-white fw-bold">
                Warning
            </span>
        </div>
    </div>
</div>

补充说明 #

• position: relative确保span的绝对定位范围被限制在父容器内，不会脱离到页面其他区域
• position-absolute top-50 start-50 translate-middle是Bootstrap的组合工具类，可快速实现元素在父容器内的完美居中
• 给span添加text-white、fw-bold这类样式，能让文字在模糊图片上更清晰可读

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