Question

我正在将SVG用于这些部分之间的涡旋式分隔线图形。由于某些原因，在某些屏幕尺寸下，它会在SVG下方显示一条小的1px垂直线（来自背景），或者在两侧显示垂直线。我不知道该如何解决。颜色来自此处的部分背景。

#booster2 {
  background: linear-gradient(to right, #0067d0, #0f9bff);
  position: relative;
}

  .booster2-bg::before {
    background: url("https://covershark.com/temp/booster2-divider-top.svg") center top no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    content: '';
    width: 100%;
    height: 350px;
    z-index: 0;
  }

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>

<BR><BR><BR>
<section id="booster2">
  <div class="booster2-bg">
    <div class="container">
      test<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    </div>
  </div>
</section>





</body>
</html>

以下是2种屏幕尺寸的图像示例：

vertical lines on sides for 898px screen size width

horizontal 1px line at the top for the 899px screen size width

Answer 1

尝试添加一个明确的background-size：

.booster2-bg::before {
    background-size: 100% 100%;
    padding-top: 13.633%; /* instead of fixed `height` to maintain aspect ratio */
}

我还将摆脱position: absolute，以便该块可以自动调整其高度，而不会垂直重叠相邻的元素。只需使用display: block。

对于某些屏幕尺寸，SVG周围有一个像素垂直线（或侧面的垂直线）

1 个答案: