主页 / coding / 问题 / 79030620
Accepted
mrconcerned
Asked: 2024-09-27 17:02:17 +0800 CST

如何在 Svelte 中使用媒体查询？

  • 772

我正在使用svelte-kit，但我对它还不太熟悉。在我的+page.svelte文件中，我得到了：

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

我用它data来显示英雄形象。

<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>

并且我想要针对移动屏幕设置不同的渐变位置，比如说：

<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>

但由于内联会background-image覆盖样式，我找不到让它工作的方法。那么，问题是，如何在 Svelte 中对具有动态图像 URL 的不同屏幕使用媒体查询？

css

1 个回答

  1. Best Answer

    您可以使用 CSS 变量将背景图像 URL 传递给 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

相关问题