html - 图像上的文本 block

Question

我使用以下教程在图像上制作文本 block :http://css-tricks.com/text-blocks-over-image/ 。我发现它实际上非常简单，而且非常有用，但是有一件事我永远无法使用，这些是跨度标签。

我遇到的问题是我想将跨度中文本的第二部分格式化为具有较小的字体大小并具有左侧填充。我尝试过包含第二个跨度并在 css 文件中定义它，但它并没有真正执行任何操作，只是保留在原来的位置。我还尝试将 block 延伸到图片末尾，但每个 block 的宽度为 1000px 是行不通的。

这里有一些图片，它们讲述了一千个单词......

我的看起来怎么样...

我希望它看起来如何......

这是一些代码...

<div class="img_destination">

      <img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />

      <h2 id="featured_destination"><span>>> Explore Fuerteventura<span class='spacer'></span><span class='spacer'></span>The island of natural beauty</span></h2>

</div>

CSS...

    /* Featured Destination */

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

h2#featured_destination {
   position: absolute;
   top: 355px;
   left: 0;
   width: 100%;
}

h2#featured_destination span {
   color: white;
   font: bold 28px/45px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   background: rgba(00, 36, 63, 0.7);
   padding: 10px;
}

h2#featured_destination span.spacer {
   padding:0 5px;
   background: none;
}

Answer 1

这是您发布的内容:

<h2 id="featured_destination"><span>>> Explore Fuerteventura<span class='spacer'></span><span class='spacer'></span>The island of natural beauty</span></h2>

我会建议一些不同的事情。首先，如果对这些箭头使用 >>，请使用 >>。有时，浏览器会错误地呈现额外的符号，因此当您希望按文字显示时，对它们进行编码始终是最安全的。另外，我不会使用空的 span 标签来创建空白，因为它往往会使标记变得困惑。

但您的主要问题是您需要更改 Span 标签的嵌套方式，以不在任何 Span 标签内包含“>>Explore Fuerteventura”，以便对两部分文本进行样式设置不同。我认为您的目标可以通过简单地将标记清理为类似这样的内容来实现:

<h2 id="featured_destination">&gt;&gt; Explore Fuerteventura <span class='spacer'> The island of natural beauty</span></h2>