如何用HTML/CSS/SVG为网站头部JPEG/PNG图片添加底部曲线效果

以下是两种可行的实现方式，基于你现有的SCSS代码进行修改：

方法一：使用伪元素内嵌SVG（无需额外HTML） #

直接在.header的SCSS中添加伪元素，用内嵌SVG作为底部曲线背景：

@mixin header-style {
  .header {
    padding: 0 3rem;
    height: 95vh;
    background-image: $gradient-primary, url(../../images/play-img--2.jpeg);
    background-size: cover;
    background-position: top;
    color: $general-color;
    position: relative; /* 伪元素定位的基础 */
    overflow: hidden; /* 避免SVG超出头部范围 */

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 80px; /* 曲线高度，可按需调整 */
      /* 内嵌蓝色曲线SVG，颜色和形状可修改 */
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="%23007bff" fill-opacity="1" d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,64C1200,75,1320,85,1380,90.7L1440,96L1440,100L1380,100C1320,100,1200,100,1080,100C960,100,840,100,720,100C600,100,480,100,360,100C240,100,120,100,60,100L0,100Z"></path></svg>');
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}

关键调整说明： #

• 给.header添加position: relative，确保伪元素能相对头部定位
• 伪元素::after绝对定位在头部底部，占满宽度
• 内嵌SVG使用data URI，无需额外文件，fill后的%23007bff是蓝色#007bff的URL编码，可替换为你需要的颜色
• 调整height值可以改变曲线的高度，修改SVG的d属性能调整曲线的弧度形状

方法二：直接插入SVG元素（适合复杂曲线） #

如果需要更复杂的曲线，可在HTML中插入SVG，再用CSS定位：

HTML结构：

<div class="header">
  <!-- 头部原有内容 -->
  <svg class="header-curve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
    <path fill="#007bff" fill-opacity="1" d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,64C1200,75,1320,85,1380,90.7L1440,96L1440,100L1380,100C1320,100,1200,100,1080,100C960,100,840,100,720,100C600,100,480,100,360,100C240,100,120,100,60,100L0,100Z"></path>
  </svg>
</div>

对应的SCSS修改：

@mixin header-style {
  .header {
    padding: 0 3rem;
    height: 95vh;
    background-image: $gradient-primary, url(../../images/play-img--2.jpeg);
    background-size: cover;
    background-position: top;
    color: $general-color;
    position: relative;
    overflow: hidden;
  }

  .header-curve {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto; /* 保持SVG比例 */
  }
}

注意事项： #

• SVG的viewBox属性要和曲线的实际尺寸匹配，确保在不同屏幕宽度下自适应
• 如果需要曲线和背景渐变融合，可调整fill-opacity的值（范围0-1）
• 务必设置.header的overflow: hidden，防止SVG超出头部区域显示

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