我對這個響應式網頁設計感到沮喪。我正在嘗試爲我正在嘗試構建的單頁網站創建橫幅(用於練習目的)。html和css中的標題橫幅
而不是將圖像作爲標題的背景,我把它寫在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>
當我嘗試調整他們失蹤的瀏覽器。 任何製作標題橫幅的技巧?
據我所知,'hgroup'標記已從W3C規範中刪除,並且至少被MDN視爲實驗性的。 – Utkanos