Todos os componentes

Fixedbg Imagemasking

Fixedbg Imagemasking é um componente de media para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT media

O que é

Fixedbg Imagemasking é um componente de media para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i motion

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Fixedbg Imagemasking

./registry/components/clip-path/fixed-bg-image-masking.tsx
import React from 'react';

function FixedBgImageMasking() {
  return (
    <>
      <section className='w-full gap-2 dark:bg-black bg-white border rounded-lg p-5'>
        <figure
          className='relative h-[70vh] bg-fixed bg-cover bg-center '
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1523612192437-66de9804ac3c?q=80&w=2070&auto=format&fit=crop')",
            maskImage: "url('/splash-center.svg')",
            maskSize: 'contain',
            maskRepeat: 'no-repeat',
            maskPosition: 'center',
          }}
        ></figure>
      </section>
    </>
  );
}

export default FixedBgImageMasking;

Componentes parecidos