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

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

我尝试了以下似乎不起作用的方法

在App.svelte中调用的组件：

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

---

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

否。组件样式在组件的所有实例之间共享，因为它们静态地提取到.CSS文件中，或者因为它们被注入到所有组件引用的单个

元素中。如果可以将变量直接放在组件的

中，这将意味着Svelte需要为每个实例创建封装样式，这将对性能有害，并将消耗大量内存

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

导出let图像_url；
.形象{
位置：相对位置；
不透明度：0.70；
背景位置：底部；
背景尺寸：封面；
背景重复：无重复；
背景附件：固定；
/*背景图像：url（{image\uURL}）*/
最小高度：100%；
}
一些文本

第二种方法是使用CSS变量，特别是在需要在多个位置使用值的情况下：

导出let图像_url；
.形象{
位置：相对位置；
不透明度：0.70；
背景位置：底部；
背景尺寸：封面；
背景重复：无重复；
背景附件：固定；
/*背景图像：url（{image\uURL}）*/
背景图像：var（--image）；
最小高度：100%；
}
一些文本

将Svelte block视为CSS黑盒。不能像在浏览器的css文件中使用javascript变量那样使用javascript变量

但是…因为它是一个CSS框，所以您可以始终使用SCS，并使用一个小巧的预处理器编译您的块，如。那你就做吧

导出let图像_url；
@导入“我的/路径/到/变量”；
.形象{
位置：相对位置；
不透明度：0.70；
背景位置：底部；
背景尺寸：封面；
背景重复：无重复；
背景附件：固定；
背景图像：url（#{$image_url}）；
最小高度：100%；
}
一些文本

…或3。使用“js解决方案中与框架无关的css”作为核心团队。它更灵活，因为内联样式不处理媒体查询、伪类和伪元素JS中的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});
    min-height: 100%;
}
</style>

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

background-image: url({image_url});