2

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

我遇到的问题是我想将跨度中文本的第二部分格式化为具有较小的字体大小并具有左填充。我已经尝试包含第二个跨度并将其定义在 css 文件中，但它并没有真正做任何事情，只是停留在原处。我还尝试将块扩展到图片的末尾，但是每个 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;
}
4

3 回答 3

2

这是您发布的内容：

<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 标签来创建空格，因为它往往会使标记变得混乱。

但是您的主要问题是您需要更改跨度标签的嵌套方式，以不在任何跨度标签内包含“>>探索富埃特文图拉”，以便文本的两个部分的样式不同。我认为您的目标可以通过简单地将您的标记清理为更像这样的东西来实现：

<h2 id="featured_destination">&gt;&gt; Explore Fuerteventura <span class='spacer'> The island of natural beauty</span></h2>
于 2012-05-29T20:24:58.403 回答
1 
<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/这就是您要找的吗？

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

于 2012-05-29T20:20:45.360 回答
1

这是您想要的效果吗：jsFiddle 示例。

我将文本 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;
}
于 2012-05-29T20:25:00.467 回答