Question

我对这种响应式网页设计感到沮丧。我试图为我试图构建的单页网站创建横幅（用于锻炼目的）。

不是将图像作为标题的背景，而是将其写入html中的标题标记内，使其看起来像横幅对我来说并不难，但我想在图像上放置一些文字，它与hgroups的绝对定位完美配合。

＆＃13;

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

＆＃13;

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

＆＃13;

当我尝试调整浏览器大小时，他们会失踪。制作标题横幅的任何技巧？

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

如果您有疑问，请评论。我希望这会有用。

html和css中的标题横幅

2 个答案: