html - 重叠/粘贴背景图像以重叠 div 的边框-6ren

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

转载作者：行者123 更新时间：2023-11-28 12:35:37

25

4

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

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

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

我的问题是:无论分辨率或设备如何，如何让图像像第一个片段(全尺寸时)一样贴在页眉底部？

最佳答案

它不需要背景图片或网格系统。 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;
    }
}

关于html - 重叠/粘贴背景图像以重叠 div 的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27726352/

25

4

0

文章推荐： css - 如何使用 Garden 和 ClojureScript (lein-garden) 生成 CSS

文章推荐： javascript - JQuery 选择类和许多其他类之一

文章推荐： javascript - IE 中的 HTTP 获取 JSON 问题，适用于 Chrome FF

文章推荐： javascript - Bootstrap 3 : Extending div outside container on right side

Python-%粘贴
我正在遵循一个教程，老师通过以下方式将 html 粘贴到我们的 scrappy shell 中:%paste (下面的 html) html_doc = " " Title of hte page
Vim:如何选择矩形区域并进行复制/粘贴
例如 1.1.1.1 a.com 2.1.1.1 b.com 1.3.1.1 c.com 1.1.5.1 d.com 1.2.1.1 e.com 现在我想从另一个文本中替换这个 ip，不一样
从剪贴板 Angular 粘贴
是否有机会在 Angular 中实现粘贴按钮。 FE:用户复制网站的链接，当他或她点击按钮时，在我的页面上复制的链接应该出现在文本框中。谢谢! 最佳答案您只能以编程方式从网页复制。您不能以编程方式
Vim 粘贴 -- 滚动浏览先前拉出的文本
我正在尝试提高 Vim 中粘贴功能的可用性，因为太多不同的删除操作(实际上我认为它们都是这样)也会拉到粘贴缓冲区。这意味着我不再能够删除一些我想粘贴到某处的文本，清理一些东西，以及。然后做我的粘贴
javascript - 从Electron中的系统剪贴板复制/粘贴
我正在构建一个简单的 Electron 应用程序，以在屏幕上的其他所有内容上显示一些文本。有一个键盘快捷键可以打开带有文本的弹出窗口。我想添加一个小功能。最好的情况是:在计算机上的任意位置选择一
excel - 通过双击事件复制/粘贴
我有一个双击事件，我希望它保存特定范围的副本。 Private Sub Worksheet_BeforeDoubleClick(ByVal Target As Range, Cancel As Boo
Scala、类层次结构和构造函数复制/粘贴
我已经为这个烦人的问题苦苦挣扎了一段时间，但没有找到一个优雅的解决方案。假设我有这样一个类层次结构: class StatWithBounds[A](val min: A, val max: A,
vba - 移动图像而不复制/粘贴
现在我有一个 Word 宏，可以通过将图像复制并粘贴到该位置来将图像移动到特定文本前面。这种方法效果很好，但成本很高。如果我的 Word 文档中有 1,000 张图像，则运行宏可能需要 30 分钟。
excel - VB在多页中右键单击复制/粘贴
让我以我是自学成才的事实作为我的问题的开头，所以请提供尽可能详细的信息，如果我需要您以不同的方式或多次解释，请耐心等待。我使用 Microsoft Visual Basic 7.0 为我的团队创建了
Scala、类层次结构和构造函数复制/粘贴
我已经为这个烦人的问题苦苦挣扎了一段时间，但没有找到一个优雅的解决方案。假设我有这样一个类层次结构: class StatWithBounds[A](val min: A, val max: A,
javascript - 如何禁止在表单中复制/粘贴？
我正在使用 Meteor 开发一个聊天应用程序，我不希望用户能够出于明显的垃圾邮件原因将内容复制/粘贴到表单中。这可能吗？这是我用来运行聊天应用程序的代码: Javascript: // render
android - 禁用上下文操作栏并长按复制/粘贴
我已经为此搜索了很多，但找不到任何建议...我提供了我自己的经典操作栏实现，所以我在所有 Activity 中声明粘贴/等..有谁知道如何做到这一点？此外，我将提供我自己的复制/粘贴功能，并且仅在需
java - 启用跨不同应用程序的复制/粘贴
Windows 中 SWT Text 的默认上下文菜单有几个我们不想要的选项。由于操作系统提供的默认上下文菜单无法修改，因此我创建了一个自定义上下文菜单，其中只有基本的文本操作，例如文本框的删除、剪切
html - “粘贴”图像到页面右侧
我最后的问题不是很清楚，我再试一次。在我的 Tumblr 博客 (http://anti-standard.tumblr.com) 上，您可以看到一张图片(图片上写着“ANTI STANDARD”)
Linux 剪切、粘贴
我必须编写一个脚本文件来剪切以下列并将其粘贴到新 .arff 文件中同一行的末尾。我想文件类型无关紧要。当前文件: 63,male,typ_angina,145,233,t,left_vent_hy
Android 从剪贴板管理器复制/粘贴
是否可以发送过去的命令，以便将文本粘贴到当前聚焦的编辑文本中。场景: 后台服务监听通知(完成) 收到通知后，需要将文本复制到剪贴板(完成) 将文本粘贴到任何当前聚焦的字段，如果不可能则放弃粘贴命令。
Python PIL 粘贴
我想用 PIL 粘贴一堆图片。出于某种原因，当我运行 blank.paste(img,(i*128,j*128)) 行时，出现以下错误:ValueError: cannot determine reg
javascript - 在网页中禁用复制/粘贴
如何在我的网页中禁用复制粘贴功能。准确地说，我不希望我的用户从我的网站上复制任何信息并将其用于个人目的。上一个关于同一主题的问题没有给出足够的解释。 onselect 和 ondrag 不起作用。请帮
java简单实现复制粘贴剪切功能代码分享
废话不多说，直接上代码，小伙伴们仔细看下注释吧。复制代码代码如下: /*简单的复制剪切粘贴功能操作：
ubuntu - 在选项卡或终端之间轻松复制/粘贴 vim
我应该在 vimrc 中添加哪一行以便在终端之间或不同文件/选项卡之间轻松复制/粘贴？我现在有: " Better copy & paste set pastetoggle= set clipboa

首页

博学

6Ren·AI

商城

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

演示:https://jsbin.com/gomoca/1/