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

【问题标题】：Overlapping/sticking a background image to overlap the border of a div重叠/粘贴背景图像以重叠 div 的边框
【发布时间】：2015-01-01 08:02:30
【问题描述】：

我有一个分为两个主要 div 的页面。一个是位于页面顶部的页眉，下面是一个页眉，它是页面内容的容器。头部可以在下面的代码sn-p中看到：

<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>

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

#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%;
        }
      }
    }
  }
}

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

我的问题是：无论分辨率或设备如何，如何让图像像第一个 sn-p（全尺寸时）一样贴在标题的底部？

【问题讨论】：

您的问题不应包含指向外部样式表的链接。花点时间将您的问题减少到最少的示例，然后将其包含在 sn-p 中，这样有人试图帮助您就可以查看所有相关代码，而不必费力地浏览一个巨大的样式表。

标签： html css twitter-bootstrap sass

【解决方案1】：

它不需要背景图像或网格系统。 Bootstrap 文档正确地指出，某些东西始终是全宽的，那么您就不需要网格系统。

演示：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;
    }
}

【讨论】：

好建议，看起来很棒。然而，对我来说，问题是这对于小屏幕来说看起来很棒，但在更大的设备上，我希望图像一直被推到右侧，并且我希望标题的高度不受图像的影响。我试过浮动 div 和图像，但似乎无法重新创建它
你不会为此使用浮点数。 .container 有一个 clearfix。要从文档流中取出某些内容，请将其绝对定位并调整为最小宽度：jsbin.com/gomoca/2

【解决方案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%;
        }
      }
    }
  }
}

【讨论】：

【解决方案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>

【讨论】：