Question

我正在尝试在https://sparktoro.com/上重新创建节分隔符。请注意分隔线（锯齿形和波浪线）的大小如何根据屏幕大小而变化。例如，在小屏幕上可能有3个峰，在大屏幕上可能有10个峰。

在我的版本中，峰的数量保持不变，而图像只是张开。这会导致分频器看起来模糊不清。

我尝试将分隔线添加为HTML中的图像，并将宽度设置为100％。

<header class="grey-bg">
   <img class="header__logo" src="https://sparktoro.com/img/sparktoro-logo.c08f697d63cf1cb31c7388dd16efbfa9.svg">
</header>
<div class="white-bar">
   <img class="zigzag" src="https://i.ibb.co/9YryFMN/zig.png">
</div>
<div class="blue-bg section"></div>
<div class="white-bar">
   <img class="wavy" src="https://i.ibb.co/xLT7Wh4/imageedit-5-8200179975.png">
</div>

*{
     margin: 0;
}

 header{
     display: flex;
     align-items: center;
     justify-content: center;
}

 .header__logo{
     width: 200px;
     padding: 25px;
     text-align: center;
}

 .grey-bg{
     background-color: #f4f4f4;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23d8d8d8' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

 .blue-bg{
     background-color: #c4e3e8;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23b9dfe5' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

 .white-bar{
     height: 10px;
     position: relative;
}

 .section{
     height: 300px;
}

 .zigzag{
     width: 100%;
     position: absolute;
     top: -10px;
     height: 30px;
}

 .wavy{
     width: 100%;
     height: 30px;
     position: absolute;
     top: -10px;
}

我希望分频器像https://sparktoro.com/一样响应屏幕尺寸。

Answer 1

sparktoro.com的实现方式是使用重复图像。因此，他们的svg只是一个重复的“波浪”，因此，根据屏幕大小，您或多或少会得到“波浪”

要获得相同的效果，请将其添加到背景中

background: url(/img/wavy-line.svg) repeat-x center center;

这将在x轴上一遍又一遍地重复img / svg。

要了解如何使svg检出他们的

https://sparktoro.com/img/wavy-line.svg

根据屏幕尺寸更改分区大小

1 个答案: