Question

我有两个问题。首先，如何使我的蓝线正好对准第一行？现在它是完全的图像下，我似乎无法改变其位置，与文本。

第二，是否有一种方法可以使第三行的阴影框与第二行的阴影框一样长？这是我的代码。谢谢。

  .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>

Answer 1

CSS z-index property允许您更改显示在其他元素前面的元素。设置要在前面的元素的z-index较高，它们将显示在z-index较低的元素上。

对于对齐问题，它位于填充，边距或边框中的某处。在Chrome或同等功能上打开“检查/样式/计算”，然后确定要在浏览器中查看它们的计算内容。

在图像上添加元素

1 个答案: