如何为MaterialUI Avatar组件图片加深色遮罩并添加文字

DevOps 小满

2026-7-1

解决Material UI Avatar组件深色遮罩与白色叠加文字的问题

你之前的问题出在直接给Avatar组件添加filter: brightness(50%)，导致伪元素生成的文字也继承了这个滤镜效果，所以文字会变暗。下面提供两种可行的解决方案：

方案一：使用伪元素分层实现（纯MUI sx属性）

将深色遮罩和文字分别用两个伪元素实现，把半透明背景只作用在遮罩层，文字层不受影响：

<Avatar
  sx={{
    position: 'relative',
    // 遮罩层：用半透明黑色背景替代filter，样式更可控
    '&::before': {
      content: '""',
      position: 'absolute',
      inset: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      borderRadius: '50%', // 匹配Avatar的圆形样式
    },
    // 文字层：确保层级在遮罩上方
    '&::after': {
      content: "'+2'",
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      color: 'white',
      fontSize: '1.5rem',
      fontWeight: 'bold',
      zIndex: 1,
    },
  }}
  alt="Cindy Baker"
  src="https://mui.com/static/images/avatar/3.jpg"
/>

方案二：用容器分层（配合Tailwind CSS）

通过外层容器包裹Avatar、遮罩和文字，结构更直观，适合利用Tailwind的样式类快速调整：

<div className="relative inline-block">
  <Avatar
    alt="Cindy Baker"
    src="https://mui.com/static/images/avatar/3.jpg"
  />
  {/* 深色遮罩：Tailwind的bg-black/50对应50%透明度的黑色 */}
  <div className="absolute inset-0 bg-black/50 rounded-full"></div>
  {/* 叠加文字：用Tailwind的工具类快速实现居中 */}
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-xl font-bold">
    +2
  </div>
</div>