html - 图像顶部的响应式文本 block

Question

我想在我根据 this dated tutorial 设置的图像顶部放置一个响应式文本 block 并根据this previous question修改.

不幸的是，似乎存在一些错误。用于在换行符两侧创建填充的 span.spacer 看起来比文本 block 的其余部分高，我也认为它导致文本无法正确左对齐。开发页can be viewed here .您可以在第一行文本的末尾看到一个更高的黑色 block ，在第二行的开头看到一个更高的黑色 block 。

我使用的 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

这是因为您在另一个 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% 太短了。