CSS Border-Image/Frame Like Overlay

Question

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

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

Есть ли способ установить высоту абсолютного позиционированного кадра на 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 сохранить текст от границы, но кроме этого, текст и границы не взаимодействуют между собой.