Question

我有一个页面，它被分为两个主要的div。一个标题位于页面顶部，其下方有一个页面内容的容器。标题可以在下面的代码段中看到：

＆＃13;

<link href="http://www.spareskills.com/css/compiled/theme.css" rel="stylesheet"/>
<body id="postajob">
<div class="header">
  <div class="background-images img1 animated fadeInUpBig"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="animated bounceInLeft">Post a job.</h2>
        <p>
          Find a job by filling out your application below. It really is easy.
          <br>
          <span class="hidden-xs">Explain the job you need and people with the right skills will be in touch</span>
        </p>
      </div>
    </div>
  </div>
</div>
</body>

＆＃13;

下面列出了相关的SASS / CSS：

＆＃13;

#postajob {
  -webkit-font-smoothing: antialiased;
  .header {
    background: $postajob_header_bg_color;
    border-bottom: 1px solid $postajob_header_border_color;
    height: auto;
    padding-bottom: 20px;
    h2 {
      margin-top: 110px;
      color: $postajob_header_text_color;
      font-weight: 400;
      font-size: 34px;
      z-index: 100;
      text-align: center;
      @include max-sm {
        margin-top: 95px;
        font-size: 28px;
      }
    }
    p {
      font-weight: 300;
      font-size: 17px;
      color: $postajob_header_subtext_color;
      z-index: 100;
      text-align: center;
      @include max-sm {
        font-size: 14px;
      }
    }
    .background-images {
      width: 100%;
      height: 50%;
      &.img1 {
        position: absolute;
        background-repeat: no-repeat;
        background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
        z-index: 3;
        @include min-md {
          background-size: 150px 150px;
          top: 150px;
          left: 80%;
        }
        @include max-md {
          background-size: 100px 100px;
          top: 180px;
          left: 85%;
        }
        @include max-sm {
          background-size: 40px 40px;
          top: 180px;
          left: 45%;
        }
        @include max-xs {
          background-size: 40px 40px;
          top: 180px;
          left: 45%;
        }
      }
    }
  }
}

＆＃13;

您可以通过调整代码段的大小来查看图像相对于标题的行为方式。然而，正如您所见，这些都是从硬编码像素到样式表。

我的问题是：无论分辨率或设备是什么，如何让图像像第一个片段一样粘在标题的底部（当它是完整尺寸时）？

Answer 1

它不需要背景图像或网格系统。 Bootstrap文档正确地说明某些东西总是全宽，然后你不需要网格系统。

DEMO：https://jsbin.com/gomoca/1/

https://jsbin.com/gomoca/1/edit?html,css,output

<强> HTML：

 <section class="primary-page-header text-center">
  <div class="container">
      <h1>Title</h1>
      <p>Text Goes Here</p>
    <div class="page-header-img center-block">
      <img src="http://placekitten.com/g/150" class="img-responsive img-circle" alt="" />
    </div>
  </div><!-- /.container -->
  </section><!-- /.primary-page-header>

<强> CSS：

.primary-page-header {
    background: #f7f7f7;
    border-bottom: 4px double #aaa;
    padding-top: 5%;
}
.primary-page-header p {
    padding-bottom: 2%;
}
.primary-page-header h1 {
      font-size:24px;
}
.page-header-img img {
    border:1px solid #aaa;
    padding:3px;
    background:#fff;
}
.page-header-img {
    width: 50px;
    height: 50px;
    margin-bottom: -25px;
}

@media (min-width:600px) { 
    .page-header-img {
        width: 100px;
        height: 100px;
        margin-bottom: -50px;
    }
}
@media (min-width:768px) { 
    .page-header-img {
        width: 150px;
        height: 150px;
        margin-bottom: -75px;
    }
    .primary-page-header h1 {
      font-size:55px;
    }
}

Answer 2

看起来你已经设置了左边：最大尺寸为85％。如果你像其他尺寸一样将它设置为45％，它应该保持在底部

#postajob {
  -webkit-font-smoothing: antialiased;
  .header {
    background: $postajob_header_bg_color;
    border-bottom: 1px solid $postajob_header_border_color;
    height: auto;
    padding-bottom: 20px;
    h2 {
      margin-top: 110px;
      color: $postajob_header_text_color;
      font-weight: 400;
      font-size: 34px;
      z-index: 100;
      text-align: center;
      @include max-sm {
        margin-top: 95px;
        font-size: 28px;
      }
    }
    p {
      font-weight: 300;
      font-size: 17px;
      color: $postajob_header_subtext_color;
      z-index: 100;
      text-align: center;
      @include max-sm {
        font-size: 14px;
      }
    }
    .background-images {
      width: 100%;
      height: 50%;
      &.img1 {
        position: absolute;
        background-repeat: no-repeat;
        background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
        z-index: 3;
        @include min-md {
          background-size: 150px 150px;
          top: 150px;
          left: 80%; ----> Change this to 45%
        }
        @include max-md {
          background-size: 100px 100px;
          top: 180px;
          left: 85%; ----> Change this to 45%
        }
        @include max-sm {
          background-size: 40px 40px;
          top: 180px;
          left: 45%;
        }
        @include max-xs {
          background-size: 40px 40px;
          top: 180px;
          left: 45%;
        }
      }
    }
  }
}

Answer 3

我没有在浏览器中测试过这个问题，但这里有一个使用背景图片和“填充高度”技巧的解决方案。 @media查询用于控制在所需断点处显示哪个图像，以便在背景图像变大时指定更高分辨率的图像。

为了沿容器的宽度居中，我们使用位置/变换技巧（绝对定位元素，设置left:50%，然后translate元素 - 自己宽度的50％。

header {
  padding: 2rem;
  text-align: center;
  position: relative;
}

header::after {
  content: ' ';
  border: 1px solid #009;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -2;
}

header::before {
  content: ' ';
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 10%;
  height: 0;
  padding-bottom: 10%;
}

@media screen and (max-width: 768px) {
  header::before {
    background-image: url(http://placehold.it/80x80);
  }
}

@media screen and (min-width: 769px) {
  header::before {
    background-image: url(http://placehold.it/100x100);
  }
}

<header>
  This is a header with some content.
</header>

重叠/粘贴背景图像以重叠div的边框

3 个答案:

DEMO：https://jsbin.com/gomoca/1/