有什么方法可以让容器的内容及其滚动条不碰到容器自己的背景图像的边缘？

Question

我正在开发一个网站页面，该页面的中心仅包含两个垂直对齐的容器。目前，

post

元素的内容及其滚动条与

top

和

bottom

容器的背景图像周围的边框文本重叠，like this。但是，我希望

post

元素的内容及其滚动条能够整齐地放置在容器各自的背景图像内部，并在其周围留有足够的空间，而不是像这样。我尝试过调整不同元素中的边距和填充大小，但这似乎没有帮助。我怎样才能达到我想要的外观和效果？

代码如下。

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

*, *::after, *::before { 
    box-sizing: border-box;
}

/* must stay as is */
html,
body {
    height: 100%;
    margin: 0;
}

/* must stay as is */
body {
    background-size: cover;
    background-attachment: fixed;
    background-image: url("https://files.catbox.moe/jn5kb6.png");
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

main {
    display: grid;
    grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
    justify-items: center;
    gap: 7em;
    height: 98%;}

.top {
    background: url("https://files.catbox.moe/je4qpd.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 990 / 687;
    padding: 4%;
    margin: 6vh auto 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.bottom {
    background: url("https://files.catbox.moe/h8qi01.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    aspect-ratio: 974 / 559;
    padding: 4%;
    overflow-x: hidden;
    overflow-y: auto;
}

.post {
    justify-content: center;
    background-color: transparent;
    font-size: 22px;
    font-family:{select:font};
    color: #000;
    width: 100%;
    /* top right bottom left */
    padding: 20px 20px 20px 20px;
    margin-top: 0vh;
    overflow-x: hidden;
    overflow-y: auto;
}

</style>
    </head>

<body>

<main>
    <div class="top">
        <div class="post">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>
    </div>
    
    <div class="bottom">
              <div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </div>
    </div>
    
</main>

</body>

</html>

Answer 1

一种选择是使用

background-attachment: local;

这将强制将背景绘制在滚动条内。唯一的问题是它仍然尊重滚动条的间距，无论其是否可见。由于你没有 x 轴滚动，它看起来像这样：

所以这并不理想。在 chrome/edge121+ 和 FF 64+ 中，它们为您提供了“实验性”

scrollbar-width

属性，可让您选择滚动条的呈现方式。使用 scrollbar-width: thin

或

scrollbar-width: none

 有效。在 Chrome Canary 122 中测试。

有什么方法可以让容器的内容及其滚动条不碰到容器自己的背景图像的边缘？

问题描述投票：0回答：1

1个回答

最新问题

有什么方法可以让容器的内容及其滚动条不碰到容器自己的背景图像的边缘？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1