Html 如何将背景图像应用到卡上，使其部分被裁剪？

我有一个由3张卡片组成的原型，问题是如何将背景图像应用到任何卡片上？我试着用

背景图像

属性来做，但没有成功。然后我试着把这个图像粘贴到卡的右边框上，作为标签，但是id也不起作用。有什么解决办法吗

我所拥有的只是：

这是HTML和CSS代码：

import React from 'react'
import styles from './AboutInfo.module.css'


export default function AboutInfo({ name, number, email, color }) {

    return (
        <div
            className={styles.infoContainer}
            style={{
                background: color === "green" ? 'url("/images/backgrounds/firGreen.png")'
                : 'url("/images/backgrounds/firRed.png")'
            }}
        >
            <p className={styles.name} style={{color: color === "green" ? "#00BC71" : "#E77B54"}}>{name}</p>
            <div className={styles.topSection}>
                <p className={styles.header}>Phone number</p>
                <p className={styles.number}>{number}</p>
            </div>
            <div className={styles.section}>
                <p className={styles.header}>Email</p>
                <p className={styles.email}>{email}</p>
            </div>
        </div>
      )
}

容器：

position: relative;
overflow: hidden;

容器内的图像标记：

position: absolute;
right: 50px;
bottom: 50px;

---

（调整像素值）

我建议从图像中分割容器。添加位置：相对于容器并在容器内添加图像

从“./AboutInfo.module.css”导入样式
导出默认函数AboutInfo（{name，number，email，color}）{
返回(
{
颜色=='绿色'？
:
}
{name}
电话号码

{number}
电子邮件
{email}
)
}

position: absolute;
right: 50px;
bottom: 50px;