如何删除网页上的空白区域？
[英]How do I remove empty white space on my webpage?
问题描述
我正在尝试制作一个网站，但遇到了无法删除一大块空白的问题。
我使用图像作为背景，并希望主要文本和徽标位于背景图像的中间。
我试过使用overflow-x: hidden; 以及弄乱 css 文件中不同元素的margin 、 padding 、 width和height值，但是，我无法让它工作。 我试图将宽度和高度设置得更大，但它不会扩展到任何尺寸的屏幕。
我以前没有遇到过这个问题，不知道为什么现在会发生。
我的代码：
h1 { font-family: "times new roman"; font-size: 2.5em; color: rgb(100, 181, 204); } #box { border-width: 0.25em; border-style: solid; border-color: black; width: 50em; margin-left: auto; margin-right: auto; padding: 1em; font-family: sans-serif; color: black; background: rgb(135, 129, 140); } div { margin: 0 auto; } html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } p { font-size: 1.2em; } .centertext { text-align: center; width: 60%; margin-left: auto; margin-right: auto; } #logo { margin-top: .5em; margin-left: 13.7em; margin-right: auto; padding: 0em 0em 0em 0em; } #background { position: absolute; z-index: -1; left: -40px; top: -88px; width: 100%; height: 100%; padding: 0 0 0 0; margin: 0 auto; } footer { display: block; background: rgb(81, 40, 117); padding: 0.1em; border-width: thin; border-style: solid; border-color: black; clear: right; } #mainnav { border-width: .1em; border-style: solid; border-color: black; width: 40em; padding-left: 0em; margin-left: auto; margin-right: auto; text-align: center; background: rgb(81, 40, 117); } #mainnav a:link { color: white; } #mainnav a:visited { color: blue; } #mainnav a:hover { color: black; } #mainnav a:active { color: light gray; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Christie Matterns Portfolio website</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <img id="logo" src="images/logo.jpg" width="840" height="200" /> <div id="box"> <div> <p id="mainnav"> <a href="index.html">Home</a> | <a href="who.html">Who am I?</a> | <a href="question.html">Questionair</a> | </p> </div> <h1 class="centertext">My Portfolio</h1> <p class="centertext"> Hello, My name is Christie Mattern, I am a web designer! </p> <p> I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress. <footer> <p class="centertext"> Christie Mattern </p> </footer> </div> </body> <img id="background" src="images/background.jpg" /> </html>
2 个解决方案
解决方案1
3 已采纳 2019-11-28 03:48:14
发生这种情况是因为您的背景图片在您的<body>标签之外。
有更好、更可维护的方法来做你想做的事情，没有所有的“黑客”。
我会尝试修改您的一些代码并将其注释掉，以便您可以更多地理解它。
使用图像作为背景
当您想将图像用作背景时，请将其用作CSS background-image 属性。 在某些情况下，使用您尝试使用它的方式会更好，但一般来说，对于这种特定情况， background-image更合适。
.myElement {
background-image: url("paper.jpg");
}
如果你想让你的文本集中在一个有背景的元素内，用一个新元素包裹你的内容，将内容插入其中，然后给这个新元素赋予background-image属性。
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
你的代码应该看起来像这样：
/* New Code Added */ .newElement { background-image: url(http://lorempixel.com/400/400/abstract/); background-repeat: no-repeat; /* Makes background nto repeat */ background-size: cover; /* Sets background size as a cover */ background-color: #cccccc; padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */ } /* Old Code. Check comments */ h1 { font-family: "times new roman"; font-size: 2.5em; color: rgb(100, 181, 204); } #box { border-width: 0.25em; border-style: solid; border-color: black; /* width: 50em; No need for this being added */ margin-left: auto; margin-right: auto; padding: 1em; font-family: sans-serif; color: black; background: rgb(135, 129, 140); } div { margin: 0 auto; } html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } p { font-size: 1.2em; } .centertext { text-align: center; width: 60%; margin-left: auto; margin-right: auto; } #logo { width: 100%; max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */ height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */ margin: 0 auto; /* Centers image horizontally */ display: block; /* Needed for the horizontal center */ } footer { display: block; background: rgb(81, 40, 117); padding: 0.1em; border-width: thin; border-style: solid; border-color: black; clear: right; } #mainnav { border-width: .1em; border-style: solid; border-color: black; /* width: 40em; No need for this being added */ padding-left: 0em; margin-left: auto; margin-right: auto; text-align: center; background: rgb(81, 40, 117); } #mainnav a:link { color: white; } #mainnav a:visited { color: blue; } #mainnav a:hover { color: black; } #mainnav a:active { color: light gray; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Christie Matterns Portfolio website</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div class="newElement"> <div class="content-wrapper"> <img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" /> </div> </div> <div id="box"> <div> <p id="mainnav"> <a href="index.html">Home</a> | <a href="who.html">Who am I?</a> | <a href="question.html">Questionair</a> | </p> </div> <h1 class="centertext">My Portfolio</h1> <p class="centertext"> Hello, My name is Christie Mattern, I am a web designer! </p> <p> I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress. <footer> <p class="centertext"> Christie Mattern </p> </footer> </div> </body> </html>
如果您想要所有网站的背景图片，只需将 background-image 属性移至
body标签即可。body { background-image: url("paper.jpg"); }删除您添加到
box和mainnav元素的宽度，内容甚至变得具有响应性，因此它已准备好用于移动设备。
解决方案2
1 2019-11-28 02:13:09
不确定我是否 100% 理解您的问题，但如果您试图让背景图像覆盖整个文档，请尝试使用 css 属性将其包裹在整个文档中。
示例：删除您拥有的 img 标签。
<body id="background">
<!-- rest of your code here -->
</body>
然后在 css 中添加 background-image 以在 id 背景下引用您的 img ：
#background {
background-image: url("images/background.jpg");
}
如何删除仅在移动视图中的 ThreeJS 网页上弹出的白色边框？
[英]How do I remove a white border that only pops on my ThreeJS webpage in mobile view?
如何删除仅在移动设备上显示的网页底部的空白？
[英]How do I remove white space at the bottom of my web page that only appears on mobile?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.