如何使用CSS为透明图片添加异形自定义背景

现有图文混排布局代码 #

CSS 代码 #

.half-half-image-text {
  padding: 70px 0;
}
.half-half-image-text h1 {
  color: #800000;
}
.half-half-image-text .content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 35px 0;
}
.half-half-image-text .content p {
  font-size: 22px;
}
.half-half-image-text .img {
  min-height: 320px;
  height: 100%;
  border-radius: 10px;
}

HTML 代码 #

<div class="half-half-image-text">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Our Mission</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="content">
          <p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="img" style="background: url('透明人物素材地址') no-repeat center / contain; width: 40%"></div>
      </div>
    </div>
  </div>
</div>

需求说明 #

当前已实现基础左右分栏图文混排布局，希望给右侧的透明人物图片添加异形流体样式的自定义装饰背景，可参考异形紫色流体背景的效果实现。

相关学习方向 #

• CSS clip-path 属性：支持自定义多边形、SVG路径等多种不规则裁剪效果，可快速生成任意形态的异形背景结构
• CSS 伪元素（::before/::after）：可作为独立装饰层叠加在图片下方，和图片层分离后可单独调整形状、颜色、阴影、偏移位置等属性
• 多值 border-radius 配置：通过设置四个角的水平、垂直圆角共8组参数，可实现接近自然流体的不规则圆润异形效果
• CSS 渐变属性（linear-gradient/radial-gradient/conic-gradient）：搭配异形结构可实现单色、多色渐变、半透明叠加等不同风格的背景效果

内容的提问来源于stack exchange，提问作者Simonsoft177