html - 如何在网站/WordPress 中使用 `control background elements`？

Question

我正在使用 WordPress(CMS) 自定义网站。我想在我的网站中添加一些元素作为背景设计。

它看起来像这样:

我用谷歌搜索并找到了一种方法 - 在 CMS 中使用构建器工具 - Elementor .

好的是，在Elementor有一种方法可以添加 background-img和控制background-position .

不好的是，我已经成功地添加并控制了元素四处移动，直到我想要的地方。但是背景元素似乎不能越过<section>这意味着它们只会留在自己的容器中。

我想出了另一种方法，即添加 <img>在当前页面。然后使用 position: absolute正确定位。

但我不想那样做。

示例片段:

#section-1 {
  background-color: #000;
  width: 100%;
  height: 200px;
  color: white;
  padding: 20px;
}
  
#section-2 {
  background-color: yellow;
  background-image: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png);
  background-position: -150px -223px;
  background-repeat: no-repeat;
  width: 100%;
  height: 200px;
  color: black;
   padding: 20px;
}

<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>

Answer 1

使用三 Angular 形作为背景图像的问题是您永远无法将它们定位在“部分”之外。背景是元素的一部分，只能达到元素的尺寸。但是，您可以使用伪元素并绝对定位它们，如下所示:

#section-1 {
  background-color: #000;
  width: 100%;
  height: 200px;
  color: white;
  padding: 20px;
  overflow: visible;
}
  
#section-2 {
  background-color: yellow;
  width: 100%;
  height: 200px;
  color: black;
  padding: 20px;
  overflow: visible;
  position: relative;
}

#section-2::before{
  content: '';
  position: absolute;
  top: -70px;
  left: 0;
  width: 200px;
  height: 200px;
  background: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png) no-repeat center center/100%
}

<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>