html - 如何使用 CSS 准确地风格化文本背景

Question

我正在尝试制作一个透明的文本背景，背景应该尽可能填满任何字符。

如果我使用 display:inline-block 两条线都会得到相同的背景宽度，所以填充文本背景效果会丢失，这不是我想要实现的。

可以通过增加行高或将行高设置为 normal 来解决相互重叠的问题，但这会在行与行之间产生巨大的差距。好吧，我想让两条线非常接近。在这种情况下，行高为 55 像素，字体大小为 47 像素。

此处标记:

.main {
  width: 500px;
  margin: 100px auto;
  background: green;
  padding: 30px;
}
.test {
  width: 450px;
}
.main h2 {
  color: #ffffff;
  font-size: 47px;
  line-height: 55px;
}
.main h2 span {
  background: rgba(0, 0, 0, 0.2);
}

<div class="main">
  <div class="test">
    <h2><span>A title about your dream kitchen</span></h2>
    <a href="">Read MOre</a>

  </div>
</div>

检查 jsfiddle:http://jsfiddle.net/srmahmud2/ze4kpmuy/

不知道我能不能让你明白。这里是快速查看的屏幕截图 http://postimg.org/image/efnmpoiy1/

Answer 1

另一种选择，使用阴影，由 this blog 提供.以下是 .main h2 span 的样式:

.main h2 span {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 10px 0 0 rgba(0, 0, 0, 0.2),
             -10px 0 0 rgba(0, 0, 0, 0.2);
}

jsfiddle:http://jsfiddle.net/slushy/mu8rwcjp/