CSS：带边​​框

Question

几天来一直在努力，似乎无法解决它。

我有这个：

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

对于outer-border我有一个罗马风格的边框，顶部和底部为60像素，左右为100像素。

我想在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