Question

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

我认为我需要使用个人border image属性，但这似乎无法应用于以下内容而不会直接影响它。

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

Answer 1

您可以将border-image指定给一个伪元素，它不会干扰页面的其余部分。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

当然，body需要很大的余量才能使文字远离边框，但除此之外，文字和边框不会相互影响。

CSS边框图像/帧像叠加

1 个答案: