Question

我正在尝试制作一个网站，但遇到了无法删除大量空白的问题。

我正在使用图像作为背景，并且希望文本和徽标位于背景图像的中间。

我尝试使用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>

Answer 1

之所以会这样，是因为您的背景图片在<body>标记之外。

有更好且更可维护的方式来完成您要尝试的工作，而没有所有的“黑客行为”。
我将尝试修改您的一些代码并将其注释掉，以便您可以进一步了解它。

使用图像作为背景

当您要将图像用作背景时，请将其用作CSS background-image Property。在某些情况下，最好使用您尝试使用的方式，但是通常，对于这种特定情况，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>

如果您想要所有网站的背景图片，只需将而是将body标签的背景图像属性。
body {
    background-image: url("paper.jpg");
}
删除您要添加到box和mainnav的宽度   元素，内容甚至可以响应，因此可以移动   设备。

Read more关于background-image及其属性。

Answer 2

不确定我是否100％理解了您的问题，但是如果您要获取覆盖整个文档的背景图像，请尝试使用css属性将其包装在整个文档中。

示例：删除您拥有的img标签。

<body id="background">
    <!-- rest of your code here -->
</body>

然后在CSS中添加background-image以在id背景下引用您的img：

#background {
    background-image: url("images/background.jpg");
}

如何删除网页上的空白区域？

2 个答案:

使用图像作为背景

所有代码都应该像这样：