<style> 标签中的变量？

Question

SvelteKit 可以在组件的标签中包含变量吗？例如，我可以让它工作：

<div class="mainContent" style="background-image: url('{backgroundImage}');">

但以下不是：

<style>
    main {
        background-image: url('{backgroundImage}');
        height: 85vh;
    }
</style>

是否可以让后者工作？我问是因为我希望能够在该背景图像上设置一个 :before ，我不相信可以内联完成。

谢谢！

Answer 1

据我所知，我会使用

let backgroundImage = '..../../'

<div class="mainContent" style="--bg-img: url({backgroundImage})">


<style>
    main {
        position: relative;
        background-image: var(--bg-img);
        ....
    }
    
    main::before {
        content: "";
        position: absolute; 
        width: 100px;
        height: 100px;
        background-image: var(--bg-img);
        ....
    }
</style>

Answer 2

您可以使用 css 属性（变量）作为

<style>
    main {
        background-image: var(--backgroundImage);
        height: 85vh;
    }
</style>

然后您可以使用 javascript as

动态地为此属性设置值

document.documentElement.style.setProperty(
          "--backgroundImage",
          "url(myimage.png)"
        );

<style> 标签中的变量？

Variables in <style> tag?

javascript

css

svelte

sveltekit