调整大小后背景图像不覆盖菜单图标

Question

我正在实现一个切换导航栏。侧面导航栏将在较小的屏幕尺寸中成为汉堡菜单图标。 背景图像未覆盖较小屏幕尺寸的菜单图标。但是在较大屏幕上使用侧面导航栏看起来不错。

content: {
flexGrow: 1,
padding: theme.spacing(3),
fontSize: 20,
backgroundImage: `url(${bg})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
height: "100%"
},

drawer: {
[theme.breakpoints.up('md')]: {
width: drawerWidth,
flexShrink: 0,
},
},
menuButton: {
marginRight: theme.spacing(2),
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
drawerPaper: {
width: drawerWidth,
opacity:0.8
},

Answer 1

您必须将背景附件设置回scroll而不是fixed。