Question

当我熟悉CSS时，我以为我可以控制这些图像，但是显然我没有。我有一个部分的bg图片，我不得不移动该图片以使用按钮和其他功能正确定位它，但是我注意到它现在正在扩大整个页面。

到目前为止，我已经尝试了这里似乎有人要求的一系列解决方案，我尝试为父容器设置最大宽度，我试图隐藏溢出，但是我可能会丢失一些东西。我与检查员一起注意到，图像也正在蔓延到下一部分。

genhtml -o out name.info --ignore-errors source

header{
  max-width:100%;
}
#hero-bg {
  position: absolute;
  background: url("https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") center center no-repeat;
  padding-top: 200px;
  padding-left: 60px;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow-x:hidden;
}

Answer 1

position:absolute使图像相对于其relative父图像定位。因此，如果要包含父项position:relative，则需要使其成为父项。然后，您可以将overflow:hidden添加到父元素。（溢出只会隐藏所有溢出的子对象，因此对图像本身使用溢出是没有用的。）

我在您的示例中添加了一个占位符图像，因此您可以看到图像没有超出容器的末尾。

header{
  max-width:100%;
  position: relative;
  overflow: hidden;
}
#hero-bg {
  position: absolute;
  background: url("http://via.placeholder.com/1000x1000") center center no-repeat;
  padding-top: 200px;
  padding-left: 60px;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow-x:hidden;
}

<header>
      <!-- Header BG Image -->
      <div id="hero-bg"></div>
      <!-- Logo & Nav -->
      <div class="content-wrapper">
        <div id="nav-bar">
          <div id="logo"><img src="./img/logo.png" alt="" /></div>
          <div id="mobile-nav">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <ul id="main-nav">
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li><a href="''" class="btn">LOREM</a></li>
          </ul>
        </div>

        <!-- Hero Content -->
        <div id="hero-showcase">
          <h1 class="hero-head">Lorem Ipsum</h1>
          <p class="hero-content">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga,
            dolore enim ab, fugit natus rerum eveniet delectus consectetur
            asperiores iusto accusantium modi recusandae. Incidunt autem iusto
            aut dolores reprehenderit corrupti vitae quae? Similique ratione
            alias aliquid nesciunt quidem quisquam porro!
          </p>
          <a href="#section1" class="info-btn btn">LOREM</a>
        </div>
      </div>
    </header>

图片无法放入父容器

1 个答案: