基于React封装一个层次模糊效果的容器组件

import React from "react";
import "./index.less";

/**
 * 创建一个具有层次模糊效果的容器组件。
 *
 * @component
 * @param {Object} props - 组件接收的props。
 * @param {number} [props.accuracy=2] - 精度，决定模糊层的数量。
 * @param {number} [props.radius=5] - 模糊层的边框圆角半径。
 * @param {number} props.height - 容器的高度，必须提供。
 * @param {number} [props.maxBlur=12.5] - 最大模糊值。
 * @param {number} [props.ratio=100] - 高度比率，用于计算每个模糊层的高度百分比。
 * @param {string} [props.className=''] - 容器的自定义类名。
 * @returns {ReactElement|null} 返回一个模糊效果的React组件，如果没有提供高度，则返回null。
 *
 * @example
 * <HcBlurBox height={100} accuracy={3} maxBlur={15} className="custom-class" />
 */
const HcBlurBox = (props) => {
  const { 
    accuracy = 2, 
    radius = 5, 
    height, 
    maxBlur = 12.5, 
    ratio = 100,
    className = '',
  } = props;

  // 如果没有提供高度，则不渲染组件
  if(!height) return null;

  return (
    <div className={`hc-blur-box-container ${className}`}>
      {Array(accuracy).fill(0).map(
        (v, i) => {
          const step = i + 1;
          const _height = ratio - (100 / accuracy) * i; // 计算每个模糊层的高度百分比
          const blur = `blur(${(maxBlur / accuracy) * step}px)`; // 根据精度和步骤计算模糊效果
          // 如果计算得到的高度小于2倍的height，则不渲染该层
          if (2 * radius > _height * height / 100) return null;
          return (
            <div
              key={i} // 添加key以满足React列表渲染的要求
              className="hc-blur-box"
              style={{
                height: `${_height}%`, // 设置模糊层的高度
                backdropFilter: blur, // 应用模糊效果
                borderBottomLeftRadius: radius, // 设置边框圆角半径
                borderBottomRightRadius: radius,
              }}
            />
          )
        }
      )}
    </div>
  )
}

export default HcBlurBox;

.hc-blur-box-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  .hc-blur-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(2.5px);
    mask: linear-gradient(to top, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
    z-index: 1;
    border: none ;
  }
}

import React from "react";
import "./index.less"; // 引入样式文件

const DoubleLayeredDiv = () => {
  return (
    <div className="container">
      {[...Array(10).keys()].map((index) => (
        <div
          key={index}
          className={`background-image img${index + 1}`}
          style={{
              background-position-y: -10*(index+1); 
              filter: `blur(${index+1}px)`; 
              bottom: -10*(index+1);
          }}
        ></div>
      ))}
      <div className="gradient-overlay"></div>
      <div className="content">Your Content Here</div>
    </div>
  );
};

export default DoubleLayeredDiv;

.container {
  margin: auto;
  margin-top: 200px;
  position: relative;
  width: 400px;
  height: 600px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 0 20px 0px;
  background-image: url('./page1.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background-image {
  width: 100%;
  height: 600px;
  background-image: url('./page1.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  z-index: 1;
}

.gradient-overlay {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to top, black, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
}