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

如有疑問，請發表評論。 我希望這會有用。