图像上方的文字块

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费额度!

最近有人问我关于这种技术的问题,我第一反应是这可能过于平凡,不值得作为教程讲解。但随后我开始思考,这里实际上有一些有趣的地方,而且这种风格足够流行,人们可能会有兴趣。

这个想法只是将一些文字覆盖在图像之上,但作为从左侧突出显示的块,在可变长度文字周围均匀地添加填充。这里有一个截图示例

 

查看演示

 

示意图

HTML

<div class="image">

      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>

将图像作为包装 div 的背景图像会更容易,但在这种情况下,我认为图像属于内容,因此应该放在 HTML 中。我们将使用该包装 div 作为绝对定位的容器。

CSS

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

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

这将使我们的文字很好地叠放在图像之上,但它没有实现我们想要在文字后面实现的透明黑色框。为此,我们不能使用h2,因为它是块级元素,我们需要一个没有特定宽度的内联元素。

让我们将内部h2包装在一个 span 中

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

使用该 span 来设置文字和背景的样式

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

问题

当内联元素换行时,块会在行的最后一个字符后立即换行,并在下一行立即从左端开始。在这种情况下,填充无济于事。

为了解决这个问题,我们将在线段的任一侧应用更多 span 来模拟该填充。<br />元素以模拟填充。

<h2><span>A Movie in the Park:<span class='spacer'></span><br /><span class='spacer'></span>Kung Fu Panda</span></h2>

我们将使用这些新的 span 来应用填充

h2 span.spacer {
   padding:0 5px;
}

修复语义

此时,设计已完成,但出于设计原因添加了许多额外的 HTML 元素。即所有这些 span。jQuery 可以介入并帮助我们。只需从标记中删除所有 span,并像这样动态地应用它们

$(function() {
    
    $("h2")
        .wrapInner("<span>")

    $("h2 br")
        .before("<span class='spacer'>")
        .after("<span class='spacer'>");

});