html - CSS Border-Image / Frame Like Overlay

Question

你好！
您将如何创建一个覆盖所有页面内容而不干扰它的边框图像？

我想我需要使用个人边框图像属性，但这似乎无法应用于下面的内容而不直接影响它。

有没有办法将绝对定位框架的高度设置为内容高度的 100%，或者是否会覆盖并阻碍所有与透明背景的内容交互......
想法？

Answer 1

您可以将边框图像分配给一个伪元素，它不会干扰页面的其余部分。

body {
  margin: 35px;
}
body:before {
  position: absolute;
  content: '';
  display: block;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border: 21px solid transparent;
  border-image: url('http://i.stack.imgur.com/V1mpM.png') 21 21 round;
}

<h1>This is the web page</h1>
<p>This is the content of the web page.</p>

当然，您将需要较大的边距body以使文本远离边框，但除此之外，文本和边框不会相互作用。