React项目中Navbar背景图设置及显示区域调整求助

一、修复背景图不显示的问题 #

你代码里的backgroundImage: "url('SpaceLogo')"属于无效路径，且backgroundColor会遮挡背景图，结合create-react-app的静态资源引用规则，按以下步骤修改：

1. 导入背景图片
   在组件顶部添加图片导入语句：

import React from 'react';
import { makeStyles } from '@material-ui/core';
import { ReactComponent as MenuLogo } from '../../images/menu-logo.svg';
// 新增：导入本地背景图
import headerBg from '../../images/pexels-kai-pilger-1341279.jpg';

2. 更新样式规则
   修改header和headerActive类的样式：

• 移除backgroundColor（或改为transparent，避免遮挡背景图）
• 使用导入的图片变量设置backgroundImage
• 添加backgroundRepeat: 'no-repeat'防止图片重复
• 补充backgroundSize控制图片缩放逻辑

修改后的useStyles部分：

const useStyles = makeStyles(theme => {
  return ({
    header: {
      boxShadow: '0rem 0rem 0rem 0.05rem #666666',
      padding: '0rem 1rem 0rem 1rem',
      position: 'relative',
      width: '100vw',
      height: 70,
      zIndex: '100',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      // 用导入的图片变量设置背景图
      backgroundImage: `url(${headerBg})`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover'
    },
    headerActive: {
        left: 352,
        boxShadow: '0rem 0rem 0rem 0.05rem #666666',
        padding: '0rem 1rem 0rem 1rem',
        position: 'relative',
        width: '81.7%',
        height: 70,
        zIndex: '100',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        // 同步给激活状态添加背景图
        backgroundImage: `url(${headerBg})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover'
    },
    // 其他样式不变
    menuLogo: {
      backgroundColor: '#d9d9d9',
      border: 'none',
      '&:hover': {
        cursor: 'pointer'
      }
    },
  });
});

二、控制图片显示区域（显示中间部分） #

要让方形图片在窄导航栏中显示中间区域，只需添加backgroundPosition属性，设置为center center即可：

在header和headerActive的样式里新增：

backgroundPosition: 'center center'

如果需要更精细的偏移控制，也可以使用百分比值（如50% 50%，效果与center一致）或具体像素值调整。另外，backgroundSize的可选值说明：

• cover：图片等比例缩放填满容器，超出部分会被裁剪
• contain：图片等比例缩放完整显示，容器可能出现留白
• 自定义尺寸：比如100% auto，强制宽度铺满容器，高度自适应

修改后的完整代码 #

import React from 'react';
import { makeStyles } from '@material-ui/core';
import { ReactComponent as MenuLogo } from '../../images/menu-logo.svg';
import headerBg from '../../images/pexels-kai-pilger-1341279.jpg';

const useStyles = makeStyles(theme => {
  return ({
    header: {
      boxShadow: '0rem 0rem 0rem 0.05rem #666666',
      padding: '0rem 1rem 0rem 1rem',
      position: 'relative',
      width: '100vw',
      height: 70,
      zIndex: '100',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      backgroundImage: `url(${headerBg})`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      backgroundPosition: 'center center'
    },
    headerActive: {
        left: 352,
        boxShadow: '0rem 0rem 0rem 0.05rem #666666',
        padding: '0rem 1rem 0rem 1rem',
        position: 'relative',
        width: '81.7%',
        height: 70,
        zIndex: '100',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundImage: `url(${headerBg})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center center'
    },
    menuLogo: {
      backgroundColor: '#d9d9d9',
      border: 'none',
      '&:hover': {
        cursor: 'pointer'
      }
    },
  });
});

function Header(props) {
  const { toggleMenu, isMenuOpen } = props;
  const classes = useStyles(props);

  return (
    <div className={ isMenuOpen ? classes.headerActive : classes.header } >
      <button 
        className={classes.menuLogo}
        onClick={() => toggleMenu()}>
        <MenuLogo /> 
      </button>
    </div>
  );
}

export default (Header);

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