如何在React+Chakra UI的卡片图片上添加文字？

要在图片卡片上添加文字，核心是让文字层叠在图片上方，利用Chakra UI的定位属性就能轻松实现，以下是修改后的完整代码：

import React from "react";
import {
    Box, Image, Text, useColorMode
} from "@chakra-ui/react";

const InterestCard = () => {
    const { colorMode } = useColorMode();
    // 根据明暗主题适配文字和背景样式
    const textBgColor = colorMode === "dark" ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)";
    const textColor = colorMode === "dark" ? "white" : "gray.800";

    return (
        <Box 
            w="130.7px" 
            rounded="20px"
            h='125.04px'
            overflow="hidden"  
            mt={10}
            position="relative" // 父容器设为相对定位，作为绝对定位的参考
        >
            <Image 
                src="https://media.geeksforgeeks.org/wp-content/uploads/20210727094649/img1.jpg"
                alt="Card Image" 
                boxSize="100%" // 让图片填满容器
                objectFit="cover" // 保持图片比例，裁剪多余部分避免变形
            />
            {/* 叠加在图片上的文字层 */}
            <Box
                position="absolute"
                bottom="0"
                left="0"
                right="0"
                bg={textBgColor}
                p={2}
            >
                <Text fontSize="sm" color={textColor} fontWeight="medium">
                    自定义卡片标题
                </Text>
            </Box>
        </Box>
    );
}

export default InterestCard;

关键实现细节： #

• 外层Box添加position="relative"，为文字层的绝对定位提供参考基准
• 调整Image的boxSize="100%"和objectFit="cover"，确保图片完美适配卡片容器
• 文字层通过position="absolute"固定在图片底部，半透明背景bg保证文字在不同图片上都清晰可读
• 结合useColorMode自动适配明暗主题，提升跨主题的视觉体验

你可以根据需求调整文字层的位置（比如居中、顶部），只需修改top/bottom/left/right属性，也可以在文字层内添加Badge、Button等其他组件。

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