html - 图像上的文本 block

Question

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

我遇到的问题是我想将跨度中文本的第二部分格式化为具有较小的字体大小并具有左填充。我已经尝试包含第二个跨度并将其定义在 css 文件中，但它并没有真正做任何事情，只是停留在原处。我还尝试将 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 标签的嵌套方式 不要在任何跨度标签中包含“>>Explore Fuerteventura”，以便文本的两个部分具有不同的样式。我认为您的目标可以通过简单地将您的标记清理为更像这样的东西来实现:

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