html - CSS:带边​​框的背景图像定位

Question

已经为此工作了好几天，但似乎无法解决。

我有这个:

<div class="outer-border">
  <div class="grid-layout">
    <div class="grid"></div>
  </div>
</div>

对于outer-border，我有一个罗马风格的边框，上下各 60 px，左右各 100 px。

我想给 grid-layout 添加一个背景图片，让它覆盖内容部分和部分边框。

无论如何，对于这种情况，是否可以正确定位背景图像？现在我得到:

在我使用 background-size: cover; 的地方，它垂直工作而不是水平工作，并且没有响应。

我的CSS:

.outer-border {
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-image: url($outer_no_top) 23% 15% 23% 15% repeat;

  background-image: url("theme/matrix-marble.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right
}

现在背景只是一个.jpg，但我尝试了不同的格式，但仍然无法处理定位。

通过将它作为 grid-layout 的背景，我让它以一种很好的方式工作，然后我必须使用定位、z-index 和负边距将它放在边界。这导致 grid 内的链接变得不可点击。

现在完全卡住了，有什么线索吗？

/大卫

更新

JsFiddle: https://jsfiddle.net/bcn42gvm/1/

Answer 1

您好，我尝试了一个通用的 png 图像。如果您在网格类中指定 overflow:hidden;，它似乎可以工作。这是一个 JSBin - output和 code