如何在 Svelte 的组件内设置正文背景图像？

问题描述

我有一个（纯）svelte 组件，它充当布局页面。我希望这个布局页面有一个背景图片。但是当我在这个组件的样式中将 background-image 设置为 body 时，它没有被应用，因为 body 在某个父组件中。当我使用 :global(body) 时，它应用于所有我不想要的布局页面。

有什么想法吗？

谢谢

解决方法

使用 body 无法实现此行为，因为它是 ImageLayout 的父级，并且没有 css 父级选择器。但是，您可以在此布局中添加一个绝对定位的 div，在背景中包含此图像。给他所有可能的 height 和 width 并使用否定 z-index 把它放在内容后面，你就得到了预期的结果：

<h1>
    Image Layout
</h1>
<div class="image"></div>
<slot></slot>

<style>
  .image {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background-image: url("https://st3.depositphotos.com/4478807/19082/i/450/depositphotos_190824428-stock-photo-white-geometric-hexagonal-abstract-background.jpg");
    z-index: -1;
  }
</style>

看看 REPL。

svelte svelte-component