CSS 边框图像/框架式叠加

Question

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

我想我需要使用个人 border image 属性，但这似乎无法在不直接影响的情况下应用于下面的内容。

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

Answer 1

您可以将 border-image 分配给伪元素，这不会干扰页面的其余部分。

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 上留出较大的边距，以使文本远离边框，但除此之外，文本和边框不会相互作用。

CSS 边框图像/框架式叠加

CSS Border-Image / Frame Like Overlay

html

css

border-image