个人中心
gpt4 book ai didi

html - 在 HTML/CSS 中寻求有关文本溢出/线性渐变的帮助

转载 作者：行者123 更新时间：2023-11-27 23:49:53 25 4
gpt4 key购买 nike

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

我希望文本继续可见。

最佳答案

你的问题太模糊了，但我还是试过了，所以这是我给你的答案。你应该将 background-image 属性应用于暴力类本身而不是标题类。

我知道您是 HTML/CSS 的新手，但您应该在网上查看优质资源以学习语言和最佳实践。您的代码有非常基本的错误，这些错误不应该出现。

  1. HTML 有标题标签 <h1>至 <h6>但是您使用了超出 HTML 无法识别或支持的标题标签。
  2. 据我所知，您将标题标签用于样式目的，这是错误的。在这种情况下，您应该删除除 <h3> 之外的所有标题标签。这实际上用作标题。
  3. 我还看出你对语义标签的了解很浅，所以你最好花点时间阅读一下。

关于html - 在 HTML/CSS 中寻求有关文本溢出/线性渐变的帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56607363/

25 4 0
文章推荐： c++ - Windows 信号量
文章推荐： python - 在 django 模板中包含 url
文章推荐： html - 目录 XSL
文章推荐： c++ - 将当前时间 simTime.dbl() 与先前存储的 double 值进行比较并不总能给出正确的答案……为什么？
行者123
个人简介

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

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