React自定义卡片组件：内容置于模糊背景图上方的实现问题

情况1：卡片背景模糊（基于页面/父容器背景） #

如果你的模糊背景是透过卡片看到下方的页面/父元素背景，用backdrop-filter: blur()是最简洁的方案，同时搭配半透明背景增强效果：

import React from 'react';
import './PricingCard.css';

const PricingCard = ({ title, price, features }) => {
  return (
    <div className="pricing-card">
      <div className="card-content">
        <h3>{title}</h3>
        <p className="price">{price}</p>
        <ul className="features">
          {features.map((feature, idx) => (
            <li key={idx}>{feature}</li>
          ))}
        </ul>
        <button className="cta-btn">选择套餐</button>
      </div>
    </div>
  );
};

export default PricingCard;

对应的CSS（PricingCard.css）：

/* 全局页面背景示例 */
body {
  background: url('/path/to/your/background.jpg') center/cover no-repeat fixed;
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-card {
  /* 核心模糊效果 */
  backdrop-filter: blur(8px);
  /* 半透明底色让模糊更自然 */
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 2rem;
  width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-content {
  color: #fff; /* 根据背景调整文字颜色 */
  text-align: center;
}

.price {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 1rem 0;
}

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.features li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cta-btn:hover {
  background-color: #45a049;
}

情况2：卡片自身带模糊背景图 #

如果需要给卡片单独设置背景图并模糊处理，同时让内容悬浮在上方，需要用双层结构：一层负责模糊背景，一层承载内容（绝对定位）：

import React from 'react';
import './PricingCard.css';

const PricingCard = ({ title, price, features, bgImage }) => {
  return (
    <div className="pricing-card">
      {/* 模糊背景图层 */}
      <div className="card-bg" style={{ backgroundImage: `url(${bgImage})` }}></div>
      {/* 内容层 */}
      <div className="card-content">
        <h3>{title}</h3>
        <p className="price">{price}</p>
        <ul className="features">
          {features.map((feature, idx) => (
            <li key={idx}>{feature}</li>
          ))}
        </ul>
        <button className="cta-btn">选择套餐</button>
      </div>
    </div>
  );
};

export default PricingCard;

对应的CSS：

.pricing-card {
  position: relative;
  border-radius: 12px;
  width: 320px;
  height: 450px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* 模糊背景层 */
.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* 模糊效果 */
  filter: blur(6px);
  /* 缩放避免模糊后边缘出现空白 */
  transform: scale(1.1);
}

/* 内容层（悬浮在背景上方） */
.card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  color: #fff;
  text-align: center;
  /* 可选：加半透明遮罩提升文字可读性 */
  background-color: rgba(0, 0, 0, 0.3);
}

.price {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 1rem 0;
}

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  flex-grow: 1;
}

.features li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cta-btn:hover {
  background-color: #45a049;
}

注意事项 #

• backdrop-filter支持现代主流浏览器，IE不兼容
• 卡片自身背景模糊时，transform: scale(1.1)是必要的，避免模糊处理后边缘露出空白
• 可根据需求调整blur()的数值（单位px）和背景透明度，达到理想视觉效果

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