好的，我想在图像上有一个梯度。这是我的实现

import Image from 'next/image'
import Box from 'mui/material/Box'
import PlayIcon from './PlayIcon.tsx'

        <Box
          sx={{
            display:'flex',
            alignItems:'center',
            justifyContent:'center',
            position: 'relative',
            width: '100%',
            height: '100%',
            backgroundImage: `linear-gradient(180deg, ${image?.data.gradient.colorOne}, ${image?.data.gradient.colorTwo})`,
          }}
        >
          <Image
            src={image.data.url}
            width={imgWidth}
            height={'80px'}
          />
          {image?.data.playButton && <PlayIcon />} // NOTICE: HAVE A ABOSULTE POSITION BECAUSE ICON SHOULD BE ON CENTER OF IMAGE
        </Box>

我尝试了所有方法，但梯度在图像下方。我该怎么解决这个问题？我真的很感激你的帮助