gpt4 book ai didi

css - Bootstrap 左/右对齐背景图像重复模式,页面高度为 100%

转载 作者:太空宇宙 更新时间:2023-11-03 18:49:19 24 4
gpt4 key购买 nike

所以我正在构建一个 Bootstrap 模板,我遇到的问题是尝试添加一个与网站左侧对齐的背景图像,并在右侧添加一个副本,它就像一个 40 像素宽度的重复高度类型模式。

它是这样写的,我知道这很愚蠢,但我已经尝试过各种组合,在 Bootstrap 容器内部、外部等等。

#background-right {
height: 100%;
position: absolute;
right: 0;
top: 0;
}

.containerbackgroundright {
background-image: url("../images/subtle_stripes.png");
height: auto;
max-width: 50px;
min-width: 0;
position: relative;
right: -15%;
}

忽略我写出来的愚蠢方式。目前就在 <body> 之后在 <container> 之前.实际情况是,重复背景的高度在大多数情况下仅达到页面的 75% 左右,具体取决于容器随该页面内容延伸的距离。它不是页面的完整 100%。

如果我更改 position:fixed它确实有效,但会产生不需要的结果,因为我不想修复它。它的宽度可以通过 Bootstrap 进行漂亮的调整,但高度不会延伸到我想要的程度,它只是停止,然后你在它下面有空白。

我的猜测是,如果我用 1600 像素或其他高度的重复图案制作图像并给出最小高度/最大高度,这可能会解决,但我不想这样做。有什么我遗漏或可以尝试的吗?

再一次,只需要一个侧边栏与页面左侧对齐,另一个侧边栏与页面右侧对齐,可以流畅地调整,以便它消失或隐藏在 Bootstrap 容器(正在工作)的后面,但我需要它是一个完整的 100无论页面拉伸(stretch)多少,页面高度的百分比。

最佳答案

你需要给予

background-repeat:repeat-x;

background-repeat:repeat-y;

在 css 中创建重复模式。

关于css - Bootstrap 左/右对齐背景图像重复模式,页面高度为 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15463596/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com