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

Question

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

有什么想法吗？

谢谢

Answer 1

您无法通过使用 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 的组件内设置正文背景图片？

How to set body background image within component in Svelte?

css

svelte

svelte-component