如何在ReactJS/NextJS应用中实现图片叠加文字并解决样式问题

在开发React/Next.js应用的图片叠加文字组件时，遇到以下问题：

• 已验证样式逻辑，但使用CSS模块的imageContainer1容器背景图无法显示
• 内联样式可正常生效，但迁移至CSS模块或style标签后样式失效
• 目标效果：实现占视口全宽的图片上叠加文字

代码示例 #

组件代码 #

import styles from './HomeContent.module.css'

const Home = () => {
  return (
    <div className={styles.container}>
      <div className={styles.imageContainer1}></div>
      <p className={styles.text}>
        text
      </p>
    </div>
  )
}
export default Home

CSS模块代码（HomeContent.module.css） #

.imageContainer1 {
  background-image: url(../public/redtesla.jpg);
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: max-content;
  /* position: relative;
  text-align: center;
  background-color: blue; */
}
.container {
  height: 100%;
  margin: 0;
}

.text{
  position: 'absolute';
  top: '25%';
  left: '10%';
  color: "red";
}

问题截图 #

• 页面效果截图：
• 元素检查截图1：
• 元素检查截图2：

解决方法 #

1. 修正背景图路径 #

Next.js中public是静态资源根目录，CSS模块引用该目录下的图片需用绝对路径，而非相对路径：

.imageContainer1 {
  background-image: url('/redtesla.jpg'); /* 去掉../public，直接使用根路径 */
}

2. 确保容器有实际高度 #

height: 100%需要父元素有明确高度作为参照，否则容器高度为0导致背景图无法显示，修改容器样式：

.container {
  min-height: 100vh; /* 用视口高度作为容器最小高度 */
  margin: 0;
  padding: 0;
}

.imageContainer1 {
  height: 100vh; /* 直接设置为视口高度 */
  max-width: 100%; /* 改为100%实现全宽 */
  position: relative; /* 开启相对定位，作为文字绝对定位的参照 */
}

3. 修正CSS属性值写法 #

CSS中属性值不需要加单引号，去掉多余引号：

.text{
  position: absolute;
  top: 25%;
  left: 10%;
  color: red;
  margin: 0;
}

4. 调整文字定位逻辑 #

要让文字叠加在图片上方，需将文字放在图片容器内部，确保定位参照正确：

// 调整组件结构
return (
  <div className={styles.container}>
    <div className={styles.imageContainer1}>
      <p className={styles.text}>text</p>
    </div>
  </div>
)

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