React：如何将加载组件居中于图片并添加暗化滤镜？

我来帮你搞定这个问题！要让加载动画居中在图片上，同时给图片加上暗化效果，咱们只需要调整一下样式结构就行，具体步骤如下：

1. 定义所需的CSS样式 #

首先我们需要三个关键样式：

• 一个相对定位的容器，用来作为加载动画的定位基准
• 给图片添加暗化滤镜的样式
• 让加载动画绝对居中的覆盖层样式

/* 图片容器：作为加载动画的定位父级，宽度随图片自适应 */
.image-container {
  position: relative;
  display: inline-block;
}

/* 图片暗化样式 */
.dimmed-image {
  filter: brightness(0.7);
}

/* 加载动画覆盖层：绝对定位居中 */
.loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 用transform居中，适配任意图片尺寸 */
  transform: translate(-50%, -50%);
  z-index: 10; /* 确保动画在图片上方 */
}

2. 修改组件代码结构 #

把Image组件放到我们定义的容器里，给图片加上暗化样式，同时把ReactLoading组件套进居中覆盖层里：

import React from "react";
import Image from "react-image-enlarger";
import ReactLoading from "react-loading";
import "./styles.css"; // 引入上面的CSS文件

export default function App() {
  const [zoomed, setZoomed] = React.useState(false);
  const src = "https://picsum.photos/200";

  return (
    <div className="App">
      <h1>React Image Enlarger Demo</h1>
      <div className="image-container">
        <Image
          className="dimmed-image"
          style={{ width: "200px", height: "auto" }}
          zoomed={zoomed}
          src={src}
          enlargedSrc={{}}
          onClick={() => setZoomed(true)}
          onRequestClose={() => setZoomed(false)}
          renderLoading={
            <div className="loading-overlay">
              <ReactLoading type={"cylon"} color="black" />
            </div>
          }
        />
      </div>
    </div>
  );
}

为什么这样有效？ #

• image-container的relative定位让内部的loading-overlay可以基于它来计算位置，inline-block保证容器宽度完全匹配图片的实际宽度，不管图片尺寸怎么变都能适配。
• dimmed-image的filter: brightness(0.7)直接给图片应用暗化效果，简单直接。
• loading-overlay用top: 50%和left: 50%先把元素左上角移到容器中心，再通过transform: translate(-50%, -50%)把元素自身的中心对齐到容器中心，这是适配任意尺寸元素居中的经典方法，完全不用担心图片大小变化。

这样修改后，加载动画就会精准居中在暗化的图片上方，完美符合你的需求啦！

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