html和css中的標題橫幅

Question

我對這個響應式網頁設計感到沮喪。我正在嘗試爲我正在嘗試構建的單頁網站創建橫幅（用於練習目的）。

而不是將圖像作爲標題的背景，我把它寫在html標題標籤內，使它看起來像一條橫幅對我來說不難，但我想在圖像上放一些文字並且它與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

看看當你放置一個位置會發生什麼：絕對的 元素在一個位置：相對一個。這應該給你你需要的東西。

您的位置目前相對於整個屏幕而不是外部橫幅區域 - 這意味着當屏幕更改大小時，無論圖像高度如何，整個屏幕都會跳轉。

如果您製作橫幅位置的外部元素：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%; 
} 

評論。 我希望這將是有用的。