Início / coding / Perguntas / 79030620
Accepted
mrconcerned
Asked: 2024-09-27 17:02:17 +0800 CST

Como usar consultas de mídia no Svelte?

  • 772

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

1 respostas

  1. Best Answer

    Você pode passar a URL da imagem de fundo para CSS usando uma variável CSS:

    <div
  class="hero-section h-screen w-full bg-cover bg-no-repeat"
  style:--background-image-url="url({data.meta.HeroImage.Source})"
></div>

<style>
  .hero-section {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22.16%),
      linear-gradient(270deg, rgba(0, 0, 0, 0) 38.11%, rgba(0, 0, 0, 0.5) 99.84%),
      var(--background-image-url) lightgray 50% / cover no-repeat;
  }
  @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%),
        var(--background-image-url) lightgray 50% / cover no-repeat;
    }
  }
</style>
    • 2

relate perguntas