时间戳

首页 > 解决方案 > Adding an element over an image

html - Adding an element over an image

问题描述

I have two questions. First, how can I make my blue line go right under the first line, aligned to it? Now it is completely under the image and I cannot seem to change its position, as with the text.

Second, is there a way to make the shadow box of the third line as long as the shadowbox of the second line? Here is my code. Thanks.

  .image {
  position: relative;
  width: 1300px;
}

intro1line {
  position: absolute;
  top: 15%;
  left: 57%;
  width: 100%;
  text-align: left;
}

intro1line span {
  color: white;
  font: 25px/70px Lato;
  letter-spacing: -1px;
}

.intro-border {
  display: block;
  width: 260px;
  height: 4px;
  background: blue;
  margin: 20px auto;
  position: absolute;
}

intro2line {
  position: absolute;
  top: 40%;
  left: 57%;
  width: 100%;
  text-align: left;
}

intro2line span {
  color: white;
  font: 30px/70px Lato;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
}

intro2line span.spacer {
  padding: 10px;
  intro1line span.spacer {
    padding: 10px;
  }
<div class="image">
  <img src="http://redone.org/_dev/ski/img/backgrounds/background_skier.jpg" alt="" style="max-width: 1300px;" />
  <intro1line>
    <span class='spacer'>HERE GOES THE FIRST LINE OF TEXT </span>
  </intro1line>
  <div class="intro-border"></div>
  <intro2line>
    <span class='spacer'>HERE IS THE SECOND LINE </span>
    <br>
    <span class='spacer'>HERE IS THE THIRD LINE </span>
    <br>
    <span class='spacer'>PERFORMANCE </span>
  </intro2line>
</div>

标签： htmlcss

解决方案

CSS z-index 属性允许您更改哪些元素显示在其他元素的前面。将您想要在前面的元素的 z-index 设置得更高，它们将显示在具有较低 z-index 的元素上。

至于您的对齐问题，它在您的填充、边距或边框中的某个地方。在 Chrome 或同等设备上打开“inspect/styles/computed”，并在浏览器上查看它们的计算结果以确保确定。

推荐阅读