如何用CSS让背景图能够撑满本身会滚动的页面？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用CSS让背景图能够撑满本身会滚动的页面？相关的知识，希望对你有一定的参考价值。
参考技术A方法如下：
1：给背景图设置一个高度
2：给你写的每个块都用上高度
3：用一个通用的空代码把自动高度撑满
margin: 0 auto;
height: 1px;
width: 100%;
备注：第三个方法的代码放在每一个大的div下面
参考技术B 把背景图设置在body上，background-size:cover;
min-height: 100vh;
亲测有效，还可以滚动，不能用min-height: 100%;是无效的 参考技术C <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.right
height: 3000px;
width:3000px;
background-image: url("https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/dmas/pic/item/6fd7912397dda144eb45e527bab7d0a20df486d3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
</style>
</head>
<body>
<div class="right">
</div>
</body>
</html>
请采纳
参考技术D .bgSetoverflow: auto;
margin:0px;
background: url(images/beijing.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
追问
变成这样了
我只是写了个例子呢，你把图片路径换个你自己的呢
追问肯定换了啊
本回答被提问者采纳 第5个回答 2020-09-02 你好朋友如何用cs让背景图能够撑满全身会滚动的页面，这个你可以让背景图。比较圆满就可以的希望能帮助到你追问我已经试过你说的这个方法了 没用
如何用背景颜色填充可见页面的其余部分？
【中文标题】如何用背景颜色填充可见页面的其余部分？【英文标题】：How do I fill the remainder of the visible page with a background color? 【发布时间】：2021-11-04 17:11:59 【问题描述】：我有一个页面，我正在尝试填充一些内容，然后用背景颜色填充页面的其余部分。我已经能够使用min-height: 100vh 实现这一点，但问题是现在我的页面滚动得到了显着扩展。是否可以只为屏幕上的可见空间着色而不增加页面上的可滚动区域。
这是一个带有jsfiddle 的简单示例：
如果您从.footer 中删除min-height: 100vh，请注意彩色方块变得更小，现在滚动区域也不是很大。如何仅填充不使用最小高度样式时可见的区域。
.body
margin-left: 50px;
.footer
background-color: grey;
min-height: 100vh;
z-index: -100;
margin-top: -150px;
img
z-index: 100;
margin-left: 200px;
h1
text-align: center;
<div class="body">
<div class="row justify-content-center text-centerr">
<h1>
This is my page heading
</h1>
</div>
<div class="row justify-content-center text-center">
<p>
This is some information about this page.
</p>
</div>
<div class="row justify-content-center text-centerr">
<div class="justify-content-center">
<img src="https://cdn.vox-cdn.com/thumbor/RkBHz5tPuCNQOG0a6FooNwiqQyw=/0x0:939x704/1820x1213/filters:focal(0x0:939x704):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg"
</div>
</div>
<div class="footer">
<br />
</div>
</div>【问题讨论】：
您提供的 HTML 和 CSS 不会复制您的 OP 中描绘的问题 可以在body元素上设置背景色，然后将.body的背景色设置为白色；
【参考方案1】：
这是我想出来的，使用flexbox和flex-grow: 1强制元素增长并占用剩余空间，flex-shrink: 0防止img和其他元素缩小。
我必须向页脚的父元素添加一个新类，以向其中添加flexbox 类。注意footer-parent 类。
<div class="body">
<div class="row justify-content-center text-center">
<h1>
This is my page heading
</h1>
</div>
<div class="row justify-content-center text-center">
<p>
This is some information about this page.
</p>
</div>
<div class="row footer-parent justify-content-center text-center">
<div class="justify-content-center">
<img src="https://cdn.vox-cdn.com/thumbor/RkBHz5tPuCNQOG0a6FooNwiqQyw=/0x0:939x704/1820x1213/filters:focal(0x0:939x704):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg" />
</div>
<div class="footer">
<br />
</div>
</div>
</div>
这是 CSS
body
margin: 0;
.body
display: flex;
flex-flow: column nowrap;
margin-left: 50px;
height: 100%;
min-height: 100vh;
.footer
background-color: grey;
flex-grow: 1;
z-index: -100;
margin-top: -150px;
.footer-parent
display: flex;
flex-grow: 1;
flex-flow: column nowrap;
img
z-index: 100;
flex-shrink: 0;
margin-left: 200px;
h1
flex-shrink: 0;
text-align: center;
【讨论】：
以上是关于如何用CSS让背景图能够撑满本身会滚动的页面？的主要内容，如果未能解决你的问题，请参考以下文章