Question

第一次创建我的致敬页面，但是在CSS中遇到了无法解决的问题。我的背景上有img，最重要的是，我尝试在具有不透明度属性的情况下将段落放在中间。当文本的长度不超过1页时。我在底部看到一些空白，因此即使将img设置为background-image: cover;

，我的img也会中断

我已经尝试通过放置一些边距属性和display来解决HTML，body CSS的问题：固定属性。

html {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  height: 100%;
}

body {
  height: 100%;
}

* {
  margin: 0px;
}

header {
  background-image: url("images/city.jpeg");
  height: 100vh;
  background-size: cover;
  background-position-y: 65%;
  background-position: fixed;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: absolute;
}

#navi {
  float: right;
}

ul {
  float: center;
  list-style-type: none;
  margin-top: 25px;
  margin-right: 25px;
}

ul li {
  display: inline-block;
}

ul li a {
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
  border: 1px solid #fff;
}

#logo {
  float: left;
  width: 150px;
  margin-top: 10px;
  position: absolute;
  margin-left: 400px;
  color: black;
  font-size: 20px;
  border-color: white;
  border-style: solid;
}

.title {
  padding: 300px 300px;
  background-color: rgba(30, 23, 23, 0.5);
  border-radius: 5px;
  margin-right: 300px;
  margin-left: 300px;
  box-sizing: border-box;
  color: #fff;
}

#lists {
  padding-left: 0px;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Tribute</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <div class="main">

      <ul id="navi">
        <li><a href="#"> About</a></li>
        <li><a href="#"> Music</a></li>

      </ul>
    </div>
    <fieldset id="logo">

      <legend style="color:white" ;> NEW YORK CITY</legend>


    </fieldset>

    <div class="title">
      <h1> New York City</h1>
      <p>New York City traces its origins to a trading post founded by colonists from the Dutch Republic in 1624 on Lower Manhattan; the post was named New Amsterdam in 1626. ... New York served as the capital of the United States from 1785 until 1790. It
        has been the country's largest city since 1790</p>
      <h2> Brief History</h2>
      <ul id="lists">
        <li><strong>1790 </strong> - Population: 33,131. New York becomes the largest city in America, surpassing Philadelphia.</li><br />
        <li><strong>1801 </strong> - New York Evening Post newspaper begins publication.</li><br />
        <li><strong>1805 </strong> - Yellow fever epidemic occurs, during which as many as 50,000 people are said to have fled the city</li><br />
        <li><strong>1811 </strong> - May 19: Close to 100 buildings burn down on Chatham Street.</li>
        <li><strong>1817 </strong> - New York Stock & Exchange Board[37] established.</li>
        <li><strong>1845 </strong> - New York City Police Department, and New York Art Union established. </li>
        <li><strong>1863 </strong> - July 13–16: Approximately 50,000 people riot in protest of President Abraham Lincoln's announcement of a draft for troops to fight in the American Civil War.[13] Over 100 are killed and many African Americans flee the
          city. The film Gangs of New York takes place during the draft riots.. </li>
        <li><strong>1871 </strong> - Grand Central Depot opens. </li><br />
        <li><strong>1872 </strong> - Metropolitan Museum of Art opens. </li><br />
        <li><strong>1878 </strong> - St. Patrick's Cathedral opens.. </li><br />
        <li><strong>1883 </strong> - Brooklyn Bridge opens. </li><br />
        <li><strong>1886 </strong> - October 28: Statue of Liberty dedicated. </li><br />
        <li><strong>1890 </strong> - Population: 1,710,715. </li><br />
        <li><strong>1883 </strong> - Brooklyn Bridge opens. </li><br />
        <li><strong>1883 </strong> - Brooklyn Bridge opens. </li><br />
        <li><strong>1886 </strong> - Brooklyn Bridge opens. </li><br />
      </ul>
    </div>
  </header>
</body>

</html>

Answer 1

尝试移除高度：100vh；和位置：绝对；从标题开始。

header {
background-image: url("images/city.jpeg");
// height: 100vh;
background-size: cover;
background-position-y: 65%;
background-position: fixed; 
background-attachment: fixed;
background-repeat: no-repeat;
// position: absolute;
}

滚动页面时遇到麻烦，当我滚动时，页面底部有空白

1 个答案: