我正在使用 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>
最佳答案
使用三 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>
关于html - 如何在网站/WordPress 中使用 `control background elements`?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56302339/