如何将HTML5内联SVG作为div元素背景且不使用绝对/固定定位

以下两种方案均不使用absolute/fixed定位，可以满足需求： #

方案1：SVG转Data URI作为背景（最推荐，无额外DOM） #

直接将你的SVG代码转码为Data URI，赋值给.main-div的background-image属性即可，不需要保留原有的.svg-div元素，所有背景展示规则都可以通过CSS背景属性控制。

代码示例 #

.main-div {
  /* 已转码的SVG Data URI */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 150' preserveAspectRatio='none'%3E%3Cpath d='M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z' stroke='none' fill='%2308f'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 按需自定义其他样式 */
  min-height: 150px;
  padding: 20px;
}

方案2：内联SVG+负margin（适合需要动态修改SVG的场景） #

如果你的SVG内容会动态生成/修改，不方便转固定Data URI，可以直接把SVG移到.main-div内部，通过负margin实现内容覆盖，全程不需要用到absolute/fixed定位。

代码示例 #

<div class="main-div">
  <!-- 移入原SVG代码 -->
  <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="display:block;width:100%;height:150px;margin-bottom:-150px;">
    <path d="M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #08f;"></path>
  </svg>
  <!-- 原有内容 -->
  <ul style="position:relative;">
    <li>a</li>
    <li>b</li>
  </ul>
</div>

这里给ul加position: relative是为了保证文字内容层级在SVG之上，不会被背景遮挡，不属于用户禁止的absolute/fixed定位范畴。

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