Question

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

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

<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-slice和/或border-image-width，以及border-image-repeat属性。请注意，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>

为什么我的边框图像属性无法正常工作？

2 个答案: