我对这个响应式网页设计感到沮丧。我正在尝试为我正在尝试构建的单页网站创建横幅(用于练习目的)。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