为什么我的边框图像属性不能按我想要的方式工作？

Question

我希望整个页面的左右两侧都有一个边框，但是每当我尝试设置边框图像时，它就会变成白色，我可以毫无问题地更改颜色，但我希望它是某个 png 图像仅在页面的左侧和右侧。

我已经尝试了所有的边框图像属性，并将左右边框设置为透明。我也尝试过更改文件路径，但我知道这不是问题，因为我在其他地方放置了相同的图像。

Image Of Webpage Borders

Sketch

<div id="margins">
ENTIRE BODY OF PAGE HERE WOULD BE HERE
   </div>

#margins {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-image-source: url('/images/background.png');

我需要图像仅显示在边框中，但它根本不显示，而是显示为白色。

Answer 1

您还需要设置边框图像切片和/或边框图像宽度，以及边框图像重复属性。注意，border-image-width 和border-width 是不同的。

#margins {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-image: url('https://picsum.photos/id/237/200/300') 50 round;
}

<div id="margins">
  ENTIRE BODY OF PAGE HERE WOULD BE HERE
</div>

Answer 2

这是一个在主体上使用背景图像的示例，可以在其他元素周围的边缘看到该背景图像。您可以将图像设置为平铺，或使用固定的、居中的背景和背景大小的封面以获得良好的效果。

body {
  margin: 0 50px 20px;
  background: url('https://picsum.photos/id/237/200/300') repeat center;
}

header {
 background: white;
 min-height: 80px;
 margin-bottom: 50px;
}

main {
 background: white;
 min-height: 200px;
 margin-bottom: 50px;
}


footer {
 color: white;
}

<header>Nav</header>
<main>Content</main>
<footer>Footer</footer>