我可以使用传递到组件的变量来设置 svelte 样式 css 属性值吗

我想创建一个接收图像名称和路径的简洁组件。我想让组件使用 CSS 将图像设置为“背景图像”。

我已经尝试过以下似乎不起作用......

调用的组件应用程序.svelte:

<Image image_url='./images/image1.jpg' />

图像.Svelte

<script>
export let image_url;
</script>

<style>
.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url({image_url});
    min-height: 100%;
}
</style>

<div class="image">
  <p>some text</p>
</div>

当我检查组件时，background_image 的 css 是：

background-image: url({image_url});

是否可以在 CSS 中转换变量？

否。组件样式在之间共享all组件的实例，要么因为它们被静态提取到 .css 文件，要么因为它们被注入到单个<style>所有组件引用的元素。如果可以将变量直接放入组件的内部<style>，这意味着 Svelte 需要创建封装样式每个实例，这会损害性能并且会消耗更多内存。

有两种方法可以解决这个问题。第一种是对可以更改每个实例的任何内容使用内联样式：

<script>
export let image_url;
</script>

<style>
.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image: url({image_url}); */
    min-height: 100%;
}
</style>

<!-- <div class="image"> -->
<div class="image" style="background-image: url({image_url});">
  <p>some text</p>
</div>

第二种，特别是当您需要在多个位置使用值时，是使用 CSS 变量：

<script>
export let image_url;
</script>

<style>
.image{
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image: url({image_url}); */
    background-image: var(--image);
    min-height: 100%;
}
</style>

<!-- <div class="image"> -->
<div class="image" style="--image: url({image_url});">
  <p>some text</p>
</div>