如何使backgorund图像覆盖整个屏幕？
[英]How can I make the backgorund image cover all of the screen?
问题描述
我有一个带有页眉和页脚的页面。 如果没有可用的页脚，则将页脚推到页面底部。 问题是带有背景图像的div不会填充从页眉到页脚的空间。 另外，它的父main没有调整大小以填充页面。 我能做什么？
html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-color: #f5f5f5; margin: 0; padding: 0; position: relative; min-height: 100%; } #in { width: 1000px; margin-left: auto; margin-right: auto; height: 100%; } header { background-color: #131b23; border-bottom: 6px solid #0f151a; text-align: center; left: 0; top: 0; width: 100%; height: 160px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); z-index: 99; } #heading { font-family: "titlefont"; color: #c03221; font-size: 55px; display: inline-block; margin-bottom: -7px; margin-top: 15px; } #subheading { font-family: "slogantextfont"; font-size: 25px; margin-top: 0px; color: #f6ae2d; margin-bottom: 30px; } main { text-align: center; background: #f5f5f5 url("https://images.unsplash.com/photo-1510940725340-44c002560b46?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") no-repeat center center; background-size: cover; } #title { margin: 0px; padding: 0px; } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #25211e; border-top: 6px solid #1d1a18; text-align: center; height: 80px; z-index: 98; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } #credit { font-family: "Helvetica"; font-size: 14px; color: #c1b497; font-weight: 600; }
<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <header> <h1 id="heading">My Page</h1> <h2 id="subheading">BLABLA BLA BLA BLA BLA BLA</h2> </header> <main> <h2 id="title">PICTURE</h2> <h2 id="title">PICTURE</h2> <h2 id="title">PICTURE</h2> </main> <footer> <p id="credit">BLABLA BLA BLA BLA BLA BLA</p> </footer> </body> </html>
2 个解决方案
解决方案1
0 2017-12-08 21:57:53
您必须做两件事：
- 在
body上设置明确的身高（100％） - 在
main上设置一个明确的高度（79％以考虑页眉和页脚已占用的空间）
见下文：
html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-color: #f5f5f5; margin: 0; padding: 0; position: relative; min-height: 100%; height: 100%; } #in { width: 1000px; margin-left: auto; margin-right: auto; height: 100%; } header { background-color: #131b23; border-bottom: 6px solid #0f151a; text-align: center; left: 0; top: 0; width: 100%; height: 160px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); z-index: 99; } #heading { font-family: "titlefont"; color: #c03221; font-size: 55px; display: inline-block; margin-bottom: -7px; margin-top: 15px; } #subheading { font-family: "slogantextfont"; font-size: 25px; margin-top: 0px; color: #f6ae2d; margin-bottom: 30px; } main { text-align: center; background: #f5f5f5 url("https://images.unsplash.com/photo-1510940725340-44c002560b46?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") no-repeat center center; background-size: cover; height: 79%; } #title { margin: 0px; padding: 0px; } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #25211e; border-top: 6px solid #1d1a18; text-align: center; height: 80px; z-index: 98; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } #credit { font-family: "Helvetica"; font-size: 14px; color: #c1b497; font-weight: 600; }
<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <header> <h1 id="heading">My Page</h1> <h2 id="subheading">BLABLA BLA BLA BLA BLA BLA</h2> </header> <main> <h2 id="title">PICTURE</h2> <h2 id="title">PICTURE</h2> <h2 id="title">PICTURE</h2> </main> <footer> <p id="credit">BLABLA BLA BLA BLA BLA BLA</p> </footer> </body> </html>
解决方案2
0 已采纳 2017-12-08 22:01:53
在主体上设置高度：100％，在主体上设置高度：100％。
如何在页面的第一部分显示背景图像并使其覆盖屏幕可见部分的100％？
[英]How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?
onMouseOver on <tr> 没有用backgorund图像覆盖单元格
[英]onMouseOver on <tr> doesn't cover cell with backgorund-image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.