Início / user-10489887

Nijat Mursali's questions

Martin Hope
mrconcerned
Asked: 2024-09-27 17:02:17 +0800 CST
  • 7

Estou usando o svelte-kit e sou bem novo nele. No meu +page.sveltearquivo, obtive:

<script lang="ts">
    const { data } = $props();
</script>

onde estou usando datapara exibir uma imagem de herói.

<div
    class="h-screen w-full bg-cover bg-no-repeat hero-section"
    style={`background: 
            linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 22.16%), 
            linear-gradient(270deg, rgba(0, 0, 0, 0.00) 38.11%, rgba(0, 0, 0, 0.50) 99.84%), 
            url(${data.meta.HeroImage.Source}) lightgray 50% / cover no-repeat;
    `}
></div>

e eu quero ter um posicionamento diferente de gradiente para as telas de dispositivos móveis, digamos:

<style>
    @media (max-width: 640px) {
        .hero-section {
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 76.81%, rgba(0, 0, 0, 0.5) 99.83%),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 48.56%, rgba(0, 0, 0, 0.8) 100%),
                url('');
        }
    }
</style>

mas como inline background-imagesobrescreve os estilos, não consegui encontrar uma maneira de fazê-lo funcionar. Então, a questão seria, como é possível no Svelte usar media queries para telas diferentes com URL de imagem dinâmica?

css