CSS用于文本周围的紧（透明）框

Question

我正在尝试使用CSS复制这个photoshopped标头：

我这样做是通过创建一个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;
}

标题的HTML：

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

然而，无论我怎么努力，我似乎​​无法像Photoshop图像中那样使用文本获得文本背景肉体。据我所知，我删除了所有填充，所以我不知道这个额外的背景来自哪里。我能得到的最接近的是：

提前道歉：我不是前端人员！

Answer 1

由于h1位于<div class="header-text">内，我会将CSS编写为：

.header-text > h1 {
   ... all the css ..
}

而不是这个（你正在做什么）：

.header-text h1 {
   ... all the css ..
}

我不知道这是不是你的问题，但无论如何它都是一个很好的提示。如果你有一个可以运行的代码片段会很好，这样你的问题就会变得清晰。

Answer 2

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

Answer 3

调整高度和线高会收紧H1周围的渐变背景。以下是我测试过的内容，发现它最像你的Photoshop示例。

.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: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height:48px; 
}