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指数和负利润率把它放在边框后面。这导致grid内部的链接变得不可点击。

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

/David

更新

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

Answer 1

嗨，我用了一个普通的png图像。如果在网格类中指定了overflow:hidden;，那么它似乎可以工作。这是一个JSBin - 输出和代码