如何通过CSS调整div内背景图尺寸，使其位于Flutter Web加载Spinner中心

架构老林

2026-10-12

调整方案（无需修改现有HTML结构，仅更新CSS即可实现需求）

你现有代码的核心问题是将背景图绑定在了外层容器上，且没有限制背景图大小、固定居中位置，调整后的CSS如下：

/* 外层加载容器样式修改 */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* 删掉原有样式里的background、resize、padding属性即可 */
}

/* 新增：居中固定的logo样式，用伪元素实现无需修改原有HTML结构 */
.loading::before {
    content: "";
    position: absolute;
    width: 60px; /* 可自行调整为你需要的logo尺寸 */
    height: 60px;
    background-image: url("img/images.jpeg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10; /* 确保logo在旋转的spinner上层显示 */
}

/* 加载动画样式优化 */
.loader {
    /* 删掉原有重复的border:15px solid属性，避免样式冲突 */
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #8a2245;
    border-right: 16px solid transparent; /* 改为透明适配不同页面背景色 */
    border-bottom: 16px solid #8a2245;
    border-left: 16px solid transparent;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}