Question

我想在我根据this dated tutorial设置的图片上放置一个自适应文本块，并根据this previous question进行修改。

不幸的是，似乎有一些错误。用于创建填充的span.spacer在换行符的任何一侧看起来比文本块的其余部分高，我还认为它导致文本未正确对齐。开发页面can be viewed here。你可以在第一行文本的末尾看到一个较高的黑色块，在第二行的开头看到一个较高的黑色块。

使用的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％。

您可能还希望增加行高（使用您使用的字体时更像是140％，而不是110％），以及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元素。

此处span内的h2元素必须具有内联元素，因为只有元素尺寸才会表现如此;在正常情况下，当然可以将h2显示为内联，但这在此处不起作用，因为h2绝对定位，并且“覆盖”display:inline，并且最终会得到一个与整个文本一样宽的框。

Answer 3

因为你在另一个span元素中有span元素（它们被重叠）并且CSStyle被应用于两者。我认为您可以将选择器修改为：h2＆gt; 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％太短了。

在图像顶部的响应文本块

3 个答案: