Question

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

我遇到的问题是我想格式化跨度中文本的第二部分以使字体较小并具有左边距。我已经尝试了包含第二个跨度并在css文件中定义它，但它并没有真正做任何事情，只是停留在它的位置。我也尝试将块扩展到图片的末尾，但每个的宽度为1000px都不起作用。

这是一些照片，因为他们说千言万语......

它看起来如何...

enter image description here

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

enter image description here

这是一些代码......

<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>

我会建议一些不同的东西。首先，如果使用＆gt;＆gt;对于这些箭头，请使用>>。有时浏览器会错误地渲染额外的符号，因此当您希望显示为文字时，最安全的编码它们。另外，我不会使用空的span标记来创建空格，因为它会使标记混乱。

但你的主要问题是你需要改变你的span标签嵌套的方式，而不包括＆＃34;＆gt;＆gt;探索Fuerteventura＆＃34;在任何span标签内，以便两个文本部分的样式不同。我认为你的目标可以通过简单地将你的标记清理成更像这样的东西来实现：

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

Answer 2

<div class="img_destination">
  <img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />
  <h2 id="featured_destination">
      <span> &gt; &gt; Explore Fuerteventura
           <span class="smaller">The island of natural beauty</span>
      </span>
  </h2>
</div>

和CSS：

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

h2 span.smaller {
    padding-left: 20px;
    font-size: 10px;
}

试试吧。以下是示例：http://jsfiddle.net/8PLaB/这就是您要找的内容吗？

您的跨度.spacer不起作用，因为它们是空的，浏览器根本不显示它们。我认为，如果你插入它们然后他们将完成他们的工作，但在我看来这不是一个好的解决方案。空标签永远不是好的解决方案。

Answer 3

这是你所追求的效果： jsFiddle example 。

我将文本div更改为：

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

我在自己的跨度中包装了第一块文本，因此您可以使用粗体字体对其进行样式设置，而文本的其余部分具有正常的权重。

这是我修改过的CSS：

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

h2#featured_destination {
    position: absolute;
    top: 355px;
    left: 0;
    width: 100%;
    background: rgba(00,36,63,0.7);
    font: 28px/45px Helvetica, Sans-Serif;
    color: #FFF;
    letter-spacing: -1px;
}

h2#featured_destination span {
    padding: 10px;
}

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

.bold {
    font-weight: 700;
}

文本块在图像上

3 个答案: