CSS Border-Image / Frame Like Overlay

Question

Привет!
Как бы вы создали изображение границы, которое перекрывает весь контент страницы, не мешая ему?

Я подумал, что мне нужно будет использовать свойство изображения личной границы, но, похоже, его нельзя будет применить к приведенному ниже контенту без непосредственного воздействия на него.

Есть ли способ установить высоту абсолютно позиционированного фрейма равным 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('https://stackru.com/images/7342d2fe4bdca856c1b4b88965aad4aa92d169a6.png') 21 21 round;
}

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

Конечно, вам понадобится большой запас на body держать текст подальше от границы, но кроме этого текст и граница не взаимодействуют.