如何在响应时使背景上的文本保持在其边界内

Question

如何让我的 title/Nav-bar 保持在背景图像边界内？当我垂直调整 window 大小时，文本离开屏幕。我基本上在我的 header 部分中放置了一个固定的背景图像，并使用相对和绝对定位将我的文本项放置在背景之上和中心。这适用于静态页面，但当我垂直调整 window 大小时，文本会从屏幕上消失。这是我到目前为止所拥有的。有什么解决方法吗？

当我在页脚上尝试此操作时，无论我将 window 设置得多么小，文本都会调整大小并保留在背景中。在那部分代码中，我在 CSS 中使用了完全相同的背景属性，并且只在 space 我的元素垂直方向上添加了额外的顶部和底部边距。一切都停留在固定的背景图像中。我错过了什么？提前谢谢你。

header{
    background-color: gray;
    position: relative;
    padding: 200px 0;
    background: linear-gradient(rgba(34, 44, 60, 0.7), rgba(34, 44, 60, 0.7)), url(images/header-image.jpg);
    width: 100%;
    height: 100vh;   
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.header-wrapper{
    position: absolute;
    top:25%;
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    border: 1px solid red;
}

.title{
    margin: 3em 0;
}

<div class="header-wrapper">
  <div class="nav-wrapper">
    <div class="brand">
      <h1>Tribute Page</h1>
    </div>
    <nav>
      <ul>
        <li><a href="#introduction">Introduction</a></li>
          <li><a href="#timeline">Timeline</a></li>
          <li><a href="#conclusion">Conclusion</a></li>
        </ul>
    </nav>
  </div>
  <div class="title">
    <h2>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2>
  </div>
  <div class="discover-btn">
    <a href="#main">
      <ion-icon name="arrow-down-circle-outline"></ion-icon>
    </a>
  </div>
</div>

Answer 1

据我所知（从片段中）您没有修改 CSS 默认框模型（即 box-sizing: content-box、MDN: the box model and w3schools: CSS box-sizing Property。重要的是了解 CSS 盒模型，确保拥有主题！）。

结果是：

header实际上是100vh + 2 * 200px高（height: 100vh加top/bottompadding: 200px 0）。
您需要使用 top: 25% 而不是（常用的）50% 来使 header-wrapper 在 top,left,transform 视图中居中。（如果您不是要让框居中，请改用原来的 25%）。

要解决您的问题，您需要使用 box-sizing: border-box（首选！）或更正所有使用 padding,border 设置的元素的每个高度或宽度值。特别是当其他元素受这些尺寸影响时。

我对所有元素都使用了公认的 box-sizing: border-box。

基本上 header { padding } 挡住了路！

您需要注意框的响应大小，因为当视口变得太小时内容仍会移出屏幕...

更新使您的框（内容）响应式调整大小的快速而肮脏的解决方案是设置 header { font-size: 1.423vmin }，使其大小取决于最小视口大小值。还使 h1-h6 使用 em 而不是 rem（父字体大小依赖而不是 root/html 字体大小依赖）。

片段更正后的代码：

/**************************/
/* preferred global rules */
/**************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, *   { box-sizing: inherit }
body { margin: 0 }

/* your code with corrections */
h1                 { font-size: 3em  } /* em instead of rem */
h2, h3, h4, h5, h6 { font-size: 2em  }
h3, h4, h5, h6     { font-weight: 700 }

header {
    position: relative;
    width : 100%;
    height: 100vh;   

    font-size: 1.423vmin; /* ADD for responsiveness */

/*    padding: 200px 0; /* REMOVE, useless in the 'header/.header-wrapper' construction */

    background-color: gray;
    background: linear-gradient(rgba(34, 44, 60, 0.7), rgba(34, 44, 60, 0.7)), url(https://via.placeholder.com/500);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.header-wrapper {
    position: absolute;
    top : 50%; /* MOD from 25% */
    left: 50%;

    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    border: 1px solid red;
}

.title {
    margin: 3em 0;
    color: CornSilk; /* ADD for testing */
}

footer {
    position: relative;
    padding: 200px 0;
    width: 100%;

    background-color: gray;
/*    background: linear-gradient(rgba(34, 44, 60, 0.7), rgba(34, 44, 60, 0.7)), url(images/footer-image.jpg);/**/
    background-color: CornFlowerBlue;

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat
}
.footer-text-wrapper {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    width: 90%
}

<header>
    <div class="header-wrapper">
        <div class="nav-wrapper">
            <div class="brand">
                <h1>Tribute Page</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#introduction">Introduction</a></li>
                    <li><a href="#timeline">Timeline</a></li>
                    <li><a href="#conclusion">Conclusion</a></li>
                </ul>
            </nav>
        </div>

        <div class="title">
            <h2>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2>
        </div>

        <div class="discover-btn">
            <a href="#main">
                <ion-icon name="arrow-down-circle-outline"></ion-icon>
            </a>
        </div>
    </div>
</header>

<footer>
    <div class="footer-wrapper">
        some footer
    </div>
</footer>

如何在响应时使背景上的文本保持在其边界内

How to make text over background stay within it's boundaries while being responsive

html

css

css-position