Question

我研究了这个问题并找到了多种解决方案，但由于某种原因，我无法让这些解决方案适合我。

问题：我试图为多行文本块中的每一行提供颜色背景。

我遇到的问题是这个......我将这个文本（h2）嵌套在span标签内（用类设置），但是整个块都是突出显示的，而不是单独的文本行。我只希望颜色延伸到文本的末尾，而不是整个文本块。

我已经包含了我的HTML和CSS。我无法弄清楚我做错了什么。以下是我要做的一个例子：

http://css-tricks.com/text-blocks-over-image/

HTML：

<h2><span class="lyrics">
"Some come in the form of codependence<br>
A lot of times only end up being codefendants<br>
Ten bucks say they tell for a lower sentence<br>
And leave you up under the jail, begging for a penance<br>
It don't make no sense, what happened to the loyalty?<br>
Honor amongst crooks, trust amongst royalty<br>
I'd rather go out in a blaze, than give 'em the glory<br>
(How many of us have...) a similar story"<br><br>
-??? 
</span></h2>

CSS：

h2 > .lyrics {
background: rgba(0,0,0,0.3);
float: left;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
line-height: 1.5;
margin-left: 50px;
margin-top: 200px;
position: relative;
}

Answer 1

您在跨度上应用了float: left问题。它使它表现得像一个块。如果你删除它（并选择更明显的颜色），你会发现它只为这些线条添加了背景颜色。

小提琴：http://jsfiddle.net/31vjg5tf/1/

它会使文本缩进有点混乱，但我认为你可以通过在h2上使用适当的填充而不是跨度上的边距来解决这个问题。

小提琴：http://jsfiddle.net/31vjg5tf/3/

基本上，你可以将定位部分移动到h2。或者大多数属性实际上，尽管对于字体和行高，它们并不重要。跨度是为了背景：

h2 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  line-height: 1.5;
  margin-left: 50px;
  margin-top: 200px;
  position: relative;
}

h2 > .lyrics {
  background: rgba(0,0,0,0.3);
}

小提琴在您更新的最小代码示例中将它们结合在一起：

http://jsfiddle.net/31vjg5tf/4/

Answer 2

将边距放在h2元素上并将其从span元素中移除并移除相对位置和浮点数。

h2 {
margin-left: 50px;
margin-top: 200px;
}

h2 > .lyrics {
background: rgba(0,0,0,0.3);
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
line-height: 1.5;
}

仅将背景颜色添加到文本的长度

2 个答案: