HTML和CSS中的标题横幅

Question

我对此响应式网页设计感到沮丧。 我正在尝试为我要构建的一页站点创建横幅（出于锻炼目的）。

我没有将图像作为标题的背景，而是将其写在html的header标记内，让它看起来对我来说并不难，但我想在图像上方放置一些文本，并且效果很好hgroup的绝对位置很好。

 header#main img{ max-width: 100%; max-height: auto; opacity: 2; margin: 0 auto; } header#main hgroup h1{ position: absolute; top: 50%; left: 20%; opacity: .5; margin-top: 0; color: #E7E7E7; font-size: 3.5em; font-family: 'Open Sans'; font-weight: lighter; max-width: 100%; margin: auto; } header#main hgroup h2{ font-family: 'Open Sans'; opacity: .9; font-style: italic; color: #E7E7E7; font-size: 1em; font-family: 'Open Sans'; font-weight: lighter; text-align: justify; position: absolute; top: 60%; left: 42%; max-width: 100%; margin: auto; } 

 <header id="main"> <img src="imgs/mountain.jpg"/> <hgroup> <h1>Title</h1> <h2> subtitle </h2> </hgroup> </header> 

当我尝试调整浏览器大小时，它们会丢失。 有任何制作标题横幅的技术吗？

Answer 1

查看将position：absolute元素放在position：relative元素中时发生的情况。 这应该给您您所需要的。

您的位置目前是相对于整个屏幕，而不是外部横幅区域-这意味着随着屏幕尺寸的变化，无论图像高度如何，整个过程都会跳跃。

如果您将横幅广告的外部元素设置为相对：，则它们将相对于横幅广告而非屏幕的尺寸。

Answer 2

我认为这应该有效。 https://jsfiddle.net/1c8qy7bo/

HTML：

<header>
  <div class="container">
  <img align="center" src="http://www.improntaunika.it/wp-content/uploads/2014/09/moutain.jpg"/>
  <h1> AAAAAAAAA </h1>
  <h2>BBBBBBBBBBBBB</h2>
  </div>
</header>

CSS：

header{
    width:100%;
    position: absolute;
    background: #f5f5f5;
    height: 14%;
    background-position: 100%;
    min-height: 80px;
    min-width: 300px;
}

   img{
  width: 100px;
  height: 100px;
  position: absolute;
  right: 50%;
  margin-right: -50px;
   }

h1{
  position: absolute;
  font-size: 10px;
  right: 50%;
  margin-right: -50px;

}
h2{
  position: absolute;
  font-size: 10px;
  right: 50%;
  margin-right: -50px;
  top:50%;
}

如有疑问，请发表评论。 我希望这会有用。