如何在网站/ WordPress中“控制背景元素”？

Question

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

它看起来像这样：

我用google搜索，找到了一种方法-在CMS- Elementor使用生成器工具。

好消息是，在Elementor有一种添加background-img和控制background-position 。

不好的是，我已经成功添加并控制了元素移动直到我想要的位置。 但是Background元素似乎无法跨越<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

使用三角形作为背景图像的问题是，您永远无法将其定位在截面的“外面”。 背景是元素的一部分，并且只能达到元素的尺寸。 但是，您可以使用伪元素并对其进行绝对定位，如下所示：

 #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>