Question

我的问题是＆＃34; h1＆＃34;文字没有显示，当我调整屏幕大小时，＆＃34; p＆＃34;文本在页面上向下移动，不再在图像上。

这是html：

<div id="home_header">
        <img src="resources/assets/home_header.png" alt="youth futures header">
        <h1>Hi</h1>
        <p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p>

</div>

这是css

h1 {
font-family: "quicksand-bold";
font-size:214px;
line-height:244px;
color:#ffffff;
margin:0;
width: auto;
text-align:center;
}

.textstyle2 {
font-family:"quicksand-bold";
font-size:38px;
line-height:43px;
color:#9ec54d !important;
}

Answer 1

您的CSS代码

.hero {
      width:960px;
      margin:1rem auto;
      position: relative;
    }

    .text {
      background:rgba(255,255,255,0.5);
      position: absolute;
      top:50%;
      left:0;
      padding:1rem;
      transform:translateY(-50%);

    }

和您的HTML代码

<div class="hero">
  <img src="http://lorempixel.com/output/city-q-c-960-480-4.jpg" alt="" />
  <div class="text">
   <h1>Hi</h1>
        <p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p>
  </div>
</div>

Answer 2

#home_header{position: relative;}将容器相对于其他元素放置，然后使用

将元素放在其中

img, h1, p {
     position: absolute;
}

现在你的div应该与你的图像具有相同的高度。然后根据容器元素#home_header调整元素的位置。例如，如果您想将段落10px保留在图像底部之上：

p {bottom: 10px;}

如果您希望图片顶部的h1具有10px的边距：

h1 {top: 10px;}

如果您想将它们放在一起，请为h1和p分配另一个容器元素，并相对于#home_header更改其位置

<div class="banner_text">
    <h1>...</h1>
    <p>...</p>
</div>

以文字为中心

.banner_text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

如何在横幅上叠加文本，并使其响应页面大小？

2 个答案: