如何对图像进行渐变？答案

【问题标题】：How to have gradient over image?如何对图像进行渐变？
【发布时间】：2022-11-13 00:54:17
【问题描述】：

好的，我想对图像进行渐变。这是我的实现

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>

我尝试了一切，但渐变在图像下。我怎样才能解决这个问题？我真的很感激一些帮助

【问题讨论】：

标签： html css reactjs material-ui next

【解决方案1】：

尝试设置 z-index 指南链接：https://developer.mozilla.org/ru/docs/Web/CSS/z-index

【讨论】：