主体边框具有更改的背景颜色或背景图像

Question

我想建立一个在浏览器窗口和网站内容之间有空隙/空间的网站。 即使滚动内容，我也需要保持此间隙。

下图应帮助您理解我的意思：

这里已经说明了类似的效果，并且可以在此处看到演示。

但是，上述解决方案只能在网站周围创建纯色边框。

问题是我想创建一个实际的间隙而不是一个透明的实心边框，以便通过它可以看到网站的正文。

我创建了这个小提琴，试图达到这种效果： https : //jsfiddle.net/jascha/ozeoe2dp/57/

正如您在上面的小提琴中看到的那样，内容周围有一个空白，通过该空白可以看到身体的背景。 即使滚动页面，该间隙也保持不变。

我通过将内容嵌套在多个div中来实现这一点。 一种是用于空白，第二种是用于滚动条，第三种是用于实际网站内容，例如：

<div class="body-border">
    <div class="scrollable-content">
        <div class="page-content">
            website content goes here
        </div>
    </div>
</div>

我的解决方案存在的问题是，滚动条无法到达视口的顶部和底部，因为间隙在滚动条的外部。 我找不到在可滚动div内部留出空隙的方法。

所以我的问题是：即使滚动页面时，又如何在该间隙之外有正常的滚动条，我如何才能在间隙中始终出现间隙呢？

我的猜测是jQuery能够实现这一点，但我真的不知道如何做到。

我希望我能解释正确，因为英语不是我的母语。 提前致谢！

Answer 1

尝试使用border-image而不是background-image ...也对html进行了一些更改，使用单独的div作为border ...

另外，您将需要将pointer-events:none应用于该边框，以便可以选择内部内容

 * { box-sizing: border-box } body { margin: 0; } .body-border { pointer-events: none; background-size: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; border: 20px solid; border-image: url(https://im-01.gifer.com/ONMJ.gif) 20; } .scrollable-content { padding: 20px; } .page-content { position: relative; background: white; } 

 <div class="body-border"></div> <div class="scrollable-content"> <div class="page-content"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> </div> 

Answer 2

我现在知道您要的是什么...尝试一下...

 .page-content{ margin-top: -20px; position: relative; background: white; } body{ margin: 0; background: url(https://im-01.gifer.com/ONMJ.gif); background-size: cover; padding: 100px; } #left { left: 0; } #right { right: 0; } #top { top: 0; } #bottom { bottom: 0; } #left, #right { position: fixed; top: 0; bottom: 0; width: 15px; } #top, #bottom { position: fixed; left: 0; right: 0; height: 15px; } 

 <!--<div class="body-border"> <div class="scrollable-content"> --> <div class="page-content"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> <!-- </div> </div> --> <div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> 

忽略我可能会误解这个问题，但是如果您要使滚动条达到视口的全高，则可以将其overflow-y: scroll; 直至身体边界div。