在 HTML/CSS 中寻找文本溢出/线性渐变的帮助答案

【问题标题】：Look for Assistance With Text Overflow/Linear Gradient in HTML/CSS在 HTML/CSS 中寻找文本溢出/线性渐变的帮助
【发布时间】：2019-06-15 04:34:45
【问题描述】：

我正在尝试使用 HTML/CSS 从头开始创建我的第一个网站。我遇到的问题是页面上的文本超出了背景图像的范围，当我向下滚动时，容器（.violence）似乎停止显示线性渐变并移至白色背景。有什么方法可以扩展和调整渐变以匹配我输入的文本数量？

提前致谢。

我曾尝试在网上搜索解决方案，但我缺乏对 HTML/CSS 的知识和理解，这使我无法解决问题。

* {
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: underline;
  padding: 5px 10px;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
}

.main-nav li.active a {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo img {
  width: 150px;
  height: auto;
  float: left;
}

body {
  font-family: monospace;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.welcome {
  position: absolute;
  width: 1200px;
  margin-left: 375px;
  margin-top: 425px;
}

h1 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 50px;
  text-align: center;
  margin-top: 0px;
}

h2 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 22px;
  text-align: center;
  margin-top: 0px;
}

.violence {
  position: absolute;
  width: 1200px;
  margin-left: 375px;
  margin-top: 75px;
}

h3 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}

h4 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
  text-align: left;
  margin-top: 25px;
}

h5 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}

h6 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
  text-align: left;
  margin-top: 0px;
}

h7 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}

h8 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
  text-align: left;
  margin-top: 0px;
}

h9 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}

<html>

<head>
  <title>The Quest for Arrakis: The Second Imperial Renaissance</title>
  <link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>
  <header>

    <div class="row">
      <div class="logo">
        <img src="logo.png">
      </div>
      <ul class="main-nav">
        <li><a href="home.html"> HOME </a></li>
        <li class="active"><a href="setting.html"> GAME SETTING </a></li>
        <li><a href=""> CHARACTERS AND ENTITIES </a></li>
        <li><a href=""> WRITING SAMPLES </a></li>
        <li><a href=""> GAME FEATURES </a></li>
        <li><a href=""> JOIN </a></li>
        <li><a href=""> CONTACT US </a></li>

      </ul>

    </div>

    <div class="violence">
      <h3>
        <p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
      </h3>
      <h4>
        <p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
          grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
        <p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
          previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
          of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
        <p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
          new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
        <h5><br>
          <p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
        </h5>
        <h6><br>
          <p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
            returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
        </h6>
        <h7><br>
          <p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
            are the ruled?"<br>-Princess Irulan</p>
        </h7>
        <h8>
          <p><br>The Quest for Arrakis II offers many paths to power.</p>
          <p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
          <p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
          <p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
            <p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
              you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
        </h8>
        <h9>
          <p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
        </h9>

    </div>

  </header>


</body>

</html>

我希望文本继续可见。

【问题讨论】：

欢迎来到 SO，Redeye。您还需要添加与上述 CSS 关联的 HTML - stackoverflow.com/help/minimal-reproducible-example
抱歉！原帖已更新。
对不起哥们，我花了 30 多分钟试图了解您的问题，但无法确切知道您想要什么...就像@Nimsrules 说您必须提供一个 MRE（最小可复制示例）所以开发人员无法解决您的问题，谢谢

标签： html css linear-gradients

【解决方案1】：

您的问题太含糊，但我仍然尝试了，所以这是我的答案。您应该将 background-image 属性应用于暴力类本身而不是标题类。

我了解您是 HTML/CSS 新手，但您应该在网络上查看优质资源以学习语言以及最佳实践。您的代码有非常基本的错误，不应该存在。

HTML 有标题标签 <h1> 到 <h6>，但您使用的标题标签超出了 HTML 无法识别或支持的范围。
据我所知，您使用标题标签进行样式设置是错误的。在这种情况下，您应该删除除 <h3> 之外的所有标题标签，<h3> 实际上用作标题。
我也可以看出您对语义标签的了解很浅，所以如果您花一点时间阅读它们会更好。

【讨论】：