图像上方的响应文本块

Question

我想在根据此过时的教程设置并根据上一个问题进行了修改的图像上放置一个响应文本块。

不幸的是，似乎有一些错误。 用于在换行符的任一侧创建填充的span.spacer看起来比文本块的其余部分高，并且我还认为这导致文本无法正确向左对齐。 可以在这里查看开发页面。 您可以在第一行文本的末尾看到一个较高的黑色块，在第二行的开头看到一个较高的黑色块。

我正在使用的CSS是

}
.image { 
position: relative; 
width: 100%; /* for IE 6 */
}

.image h2 { 
position: absolute; 
bottom: 20px;
left: 0; 
width: 100%; 
text-shadow: none;
}
h2 span { 
color: #fff; 
font-size: 110%;
width: 40%;
line-height: 110%;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
}
h2 span.spacer {
padding:0 5px;
}

HTML是

<div class="image">

<img alt="Trekking" src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg" />
<h2><span>Trekking:<span class='spacer'></span><br />
<span class='spacer'></span>It's a Jungle Out There</span></h2>
</div>

对此修复或以更好的方式进行修复的任何建议，不胜感激！

Answer 1

高度增加的原因是跨度在跨度内，导致两次将110％的字体大小应用。 在垫片上设置100％的字体大小。

您可能还希望增加行高（使用的字体比110％高140％），并使用10px的间隔填充来匹配开始/结束的20px。 确实感觉应该有一种更简单的方法来做到这一点！

Answer 2

没错，本教程已经过时了-我根本不会理会“ spacer-span” mumbo-jumbo。

而且，虽然不可能对内联元素的每一行都应用水平填充（只能在第一行和最后一行之后应用），但是可以使用box-shadow来实现类似的效果 （只要只需要背景颜色，而无需图片）。

<div>
<img src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg">
    <h2><span>Trekking:&#10;It’s a Jungle Out There</span></h2>
</div>

div { position:relative; }
img { display:block; max-width:100%; }
h2 { position:absolute; bottom:0; left:.5em; white-space:pre; line-height:1.333; }
h2 span { padding:.125em 0 .125em .25em; background:rgba(0,0,0,.75); color:#fff;
          box-shadow:-.5em 0 0 rgba(0,0,0,.75), .5em 0 0 rgba(0,0,0,.75); }

在此小提琴中查看它： http : //jsfiddle.net/FXJEL/

如您的示例所示，我在此将span元素的padding-left ，以使文本的第一行稍微向右移动-假设这是理想的效果； 如果没有，只需将其删除。

我没有使用<br>将文本分成两行，而是使用
 换行符和white-space:pre使其按原样显示。 但是，如果看起来更方便，请随时将其更改为使用br元素。

h2内的span元素在此处必须具有内联元素，因为就元素尺寸而言，只有那样才行。 在正常情况下，当然可以使h2显示为内联，但是在这里不起作用，因为h2的位置是绝对的，并且“覆盖”了display:inline ，最后一个框的宽度也是如此作为全文。

Answer 3

假设您在另一个span元素中有span元素（它们被覆盖）并且CSStyle应用于这两个元素。 我认为您可以将选择器修改为：h2> span {...}，

您可以为每条线使用一个span元素（每条都有不同的外观）：

<h2>
<span class="big">Trekking:</span>
<br>
<span>It's a Jungle Out There</span>
</h2>


h2 span {
color: #fff;
font-size: 110%;
line-height: normal;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
display: inline-block;;
}
h2 span.big {
font-size:130%;
}

宽度40％太短。