如何在 Svelte 中的组件内设置身体背景图像？

【问题标题】：How to set body background image within component in Svelte?如何在 Svelte 中的组件内设置身体背景图像？
【发布时间】：2021-09-20 20:23:55
【问题描述】：

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

有什么想法吗？

谢谢

【问题讨论】：

能否提供一个沙盒或 REPL 来解决您的问题？
svelte.dev/repl/83b263da64504c80a7811675833671bf?version=3.38.3 只需注意 ImageLayout.svelte 中样式声明中的 :global(body) 与 body 即可。目的是在显示 LoginPage 时在正文上显示背景图像，但在显示 MainPage 时不显示背景图像。谢谢

标签： css svelte svelte-component

【解决方案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。

【讨论】：