圖像上的文本塊

Question

我已經使用以下教程在圖像上創建文本塊：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; 
} 

Answer 1

這是你後的效果：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; 
} 

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

這裏是你貼什麼：

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