个人中心
gpt4 book ai didi

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

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

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

我使用图像作为背景，并希望主要文本和 Logo 位于背景图像的中间。

我尝试过使用 overflow-x: hidden; 以及弄乱 margin、padding、width 和 height CSS 文件中不同元素的值，但是我无法让它工作。我试图将宽度和高度设置得更大，但它不会扩展到任何尺寸的屏幕。

我以前没有遇到过这个问题，现在也不知道为什么会这样。

我的代码:

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>

最佳答案

发生这种情况是因为您的背景图片在 <body> 之外标签。

有更好、更易于维护的方法来完成您想要做的事情，而无需所有“黑客攻击”。
我将尝试修改您的一些代码并将其注释掉，以便您能更多地理解它。

使用图片作为背景

当您想将图像用作背景时，将其用作 CSS background-image Property .在某些情况下，使用您尝试使用它的方式会更好，但一般来说，对于这种特定情况 background-image比较合适。

.myElement {
   background-image: url("paper.jpg");
}

如果你想让你的文本集中在一个有背景的元素中，用一个新元素包裹你的内容，将内容插入其中，然后给这个新元素 background-image属性(property)。

<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>

If you wanted a background image for all the website, just move the background-image attributes to the body tag instead.

body {
    background-image: url("paper.jpg");
}

Removing the width you were adding to the box and mainnav elements, the content even becomes responsive so it's ready for mobile devices.

Read more about background-image and its properties.

关于html - 如何删除网页上的空白区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59080712/

24 4 0
文章推荐： opencv - 如何为彩色图像添加噪声 - Opencv
文章推荐： c# - 元素出现次数最多的列表
文章推荐： c# - `IEnumerable` 文件的内容的 `.csv` 类型应该是什么？
文章推荐： c# - 如何使用 .net 读取包含 2900 万行数据的巨大 CSV 文件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com