如何正确设置Png边框图像

Question

我试图将png设置为一个div的底部边框，然后再次设置为页脚的顶部。我已经尝试过边框图像并将其用作div的背景图像，但是我没有弄清楚。现在，我在第一个div的底部只有一个黑条，而页脚的顶部有一个黑斑。任何解释将不胜感激。

到目前为止，这是我的代码。

主页

    <div className='about-wrapper'>
    <img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'></img>
    <h2>Name</h2>
    <p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
  </div>

 .about-wrapper {
  padding: 20px;
  border-bottom: 50px solid transparent;
  border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;
  background: linear-gradient(#519DFE, #110BFF);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  height: 100vh;
  color: white;
}

脚

<div className='footer-wrapper'>
  </div>


    .footer-wrapper {
  height: 400px;
  background: #001ED4;
  border-top: 50px solid transparent;
  border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;

这是我的页面外观

First Div

Footer

Answer 1

border-image-slice属性指示图像的哪些部分用于边框；只有一个值，它将与切片的宽度和高度的百分比相同。

（请注意，为了清楚起见，我在插图中使用了大约10％，但对于1％的效果相同。）由于about-wrapper div仅具有边框底部，因此仅会使用底部

因此，如果要将整个图片作为底边框，则解决方案是不使用1％的图片切片。您将需要0 0 100% 0（分别用于顶部，右侧，底部和左侧）。与页脚相同：对于顶部边框，请使用100% 0 0 0。

.about-wrapper {
  padding: 20px;
  border-bottom: 50px solid transparent;
  border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 0 0 100% 0;
  background: #110BFF linear-gradient(#519DFE, #110BFF);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  height: 100vh;
  color: white;
}

.footer-wrapper {
  height: 400px;
  background: #001ED4;
  border-top: 50px solid transparent;
  border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 100% 0 0 0;

<div class='about-wrapper'>
  <img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'>
  <h2>Name</h2>
  <p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
</div>

<!-- Footer -->

<div class='footer-wrapper'>
</div>