html - 将文本对齐到按钮底部和背景前面

Question

如何将按钮中的文本对齐到底部？

我尝试在我的 CSS 中设置 line-height 和 vertical-align: bottom; 但都不起作用。

更新:

此外，我希望文本位于背景的前面。我在 normal、hover 和 active 状态下设置了渐变，所以我的白色文本位于其前面。

代码:

.img-panel {
  position: relative;
  height: 300px;
  width: 100%;
  background-size: cover;
  color: white;
}

.img-panel:after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}

.img-panel:hover:after {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}

.img-panel:active:after {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
  <div class="col-md-4 img-panel-container">
    <button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
      Hello
    </button>
  </div>
</div>

由于某些原因，bootstrap 在代码片段中不起作用

Answer 1

您可以在按钮中创建一个子元素(此处为 span)，并将其放置在按钮底部。

因为按钮是position: relative，position: absolute 的span 将根据按钮定位。

我们还通过 ::before 伪元素选择器创建了一个子元素来显示背景。为了解决哪个 child 将显示在顶部，在两个 position: absolute 元素之间，浏览器使用 HTML/DOM 顺序。因此 ::before 元素将显示在其他元素下方，而 ::after 将显示在顶部。您还可以使用 z-index 属性强制堆叠顺序。

.img-panel {
  position: relative;
  height: 300px;
  width: 100%;
  background-size: cover;
}

.img-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}

.img-panel > span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
  <span>Hello</span>
</button>