Альфа -маска на изображении с использованием пользовательского интерфейса чакры для создания градиента непрозрачности [д ⇐ Javascript

[Anonymous]

Я хочу создать простой градиент непрозрачности на изображении. Я использую next.js с чакрым пользовательским интерфейсом и CSS Taillide для переднего дизайна, и я не могу найти способ сделать это. /> Это мой текущий код: < /p>
loginpage.js

Код: Выделить всё

import { Box, Flex, Image, Card } from "@chakra-ui/react";
export default function LoginPage() {
return (














);
}

page.js

Код: Выделить всё

import Header from "./pages/header";
import LoginPage from "./pages/loginPage";

export default function Home() {
return (




);
}

layout.js
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ColorModeProvider } from "@/components/ui/color-mode";
import { Provider } from "@/components/ui/provider";

const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});

export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({ children }) {
return (




{children}




);
}
< /code>
Я попытался: < /p>

Иметь изображение с линейным фоном градиента < /li>
Иметь коробку с линейным градиентом и изображение внутри него с помощью режима смеси < /li>


/> Но ничего не работает ... < /p>
спасибо! < /p>

Подробнее здесь: https://stackoverflow.com/questions/795 ... y-gradient