使用Bulma实现图片一半与黑白容器分别重叠的布局效果

云原生阿岚

2026-10-6

Bulma实现SVG跨黑白双容器重叠效果方案

核心实现逻辑非常简单，利用绝对定位加偏移就能实现你要的一半重叠效果，全程兼容Bulma框架的原有语法，不需要改动现有布局逻辑：

实现步骤

给上层黑色背景的section容器添加Bulma自带的is-relative辅助类，开启相对定位，作为SVG的定位父级
将你的全宽SVG放在黑色容器的内部末尾，给SVG加自定义类名方便控制样式
给SVG写少量自定义样式，用transform向上偏移自身高度的50%，就能实现一半落在黑色容器、一半落在下方白色容器的效果

代码示例

HTML结构

<!-- 上层黑色背景容器 -->
<section class="section is-dark has-background-black is-medium is-relative">
  <div class="container">
    <!-- 黑色区域原有内容 -->
    <h1 class="title has-text-white">示例标题</h1>
    <p class="subtitle has-text-white">黑色区域的其他内容</p>
  </div>
  <!-- 你的汽车SVG -->
  <img src="你的SVG文件路径" alt="汽车线条图形" class="car-svg">
</section>

<!-- 下层白色背景容器 -->
<section class="section is-white is-medium">
  <div class="container">
    <!-- 白色区域原有内容 -->
    <h2 class="title">下方内容区域</h2>
    <p>白色区域的其他内容</p>
  </div>
</section>

自定义CSS

.car-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 偏移自身高度的50%，正好一半跨在两个容器之间 */
  transform: translateY(50%);
  z-index: 10;
}