html - 文本周围的紧凑(透明)框的 CSS

Question

我正在尝试使用 CSS 复制这个经过 Photoshop 处理的标题:

我通过创建一个背景为标题图像的 CSS 类来做到这一点:

.header-text {
  background-image: url(/images/group.jpg);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  background-size: auto;
  width: 900px;
  height: 250px;
  /*margin: 0px 0 0 0px;*/
  padding: 0 0 0 0;
  position: relative;
  float: left;
}

然后将包含文本的 h1 放入该类的 div 中。这是 h1 的 CSS(抱歉，由于我一直在尝试调试，它过于冗长):

.header-text h1{
  background: 
    linear-gradient(
      rgba(33, 33, 33, 0.7),
      rgba(33, 33, 33, 0.7)
    );
  position: absolute;
  font-weight: normal;
  bottom: 0px;
  left: 0px;
  font-family: 'Roboto', Calibri, Helvetica, Arial, sans-serif;
  font-size: 75px;
  color: #f2f2f2;
  width: 900px;
  height: 82px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

以及 header 的 HTML:

<div id="header_wrap" class="inner">
  <div class="header-text">
    <h1>CS Women UMass Amherst</h1>
  </div>
  ...
</div>

但是，无论我多么努力，我似乎​​都无法像在 Photoshop 图像中那样使文本背景充满文字。据我所知，我已经删除了所有填充，所以我不知道这个额外的背景是从哪里来的。我能得到的最接近的是:

提前致歉:我不是前端人员!

Answer 1

负 line-height 应该有助于获得我认为您正在寻找的效果。这是一个 example .