主页 / user-10489887

Nijat Mursali's questions

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

我正在使用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