小编bej*_*mes的帖子

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

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

App.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 中转换变量？