Я пытаюсь наложить эффект наложения на изображение, используя z-index. В HTML & CSS тот же код отображает изображение с наложением зеленого градиента. В стилизованном компоненте тот же результат возвращает градиент и изображение не отображается.
Я использую стилизованную тематику, чтобы получить эффект тематики c, т.е. когда я передаю великий Философ [ее значение, я должен получить зеленый оверлей.
Ниже приведен соответствующий код.
const Image = styled.img`
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
position: relative;
z-index: -1;
display: block;
`;
const ImageWrapper = styled.div`
display: inline-block;
border-radius: 50%;
background: ${gradient};
`;
const gradient = theme("genre", {
grandPhilosophers:
"-webkit-linear-gradient( 210deg, rgba(0, 0, 0, 0) 0%, rgba(6, 160, 88, 0.301) 100% )",
luminaries: "#222"
});
Functional component:
const GenreFancyItem = () => {
return (
<Body>
<ThemeProvider theme={{ genre: "grandPhilosophers" }}>
<GenreHeader>
<GenreName style={{ marginTop: "0px" }}>
The Grand Philosopher
</GenreName>
</GenreHeader>
<GenreFancyItemContainer>
<FancyItemBox>
<ImageWrapper>
<Image src={aynRand} />
</ImageWrapper>
<FancyItemContent>
<h2>Ayn Rand</h2>
<NotableWork>The Fountainhead</NotableWork>
</FancyItemContent>
</FancyItemBox>
</GenreFancyItemContainer>
</ThemeProvider>
</Body>
);
};