Question

我正在尝试制作一个透明的文字背景，并且背景应该填充任何角色。

如果我使用display:inline-block，则两行都会获得相同的背景宽度，因此缺少填充文本背景效果，这不是我想要实现的目标。

通过增加行高或设置行高normal可以修复彼此的顶部，但这会在行之间产生巨大的差距。好吧，我想两条线都非常接近。在这种情况下，线宽为55px，字体大小为47px。

标记在这里：

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

如何使用CSS准确地样式化文本背景

1 个答案: