2

次のチュートリアルを使用して、画像上にテキストブロックを作成しました：http：//css-tricks.com/text-blocks-over-image/。実際にはとても簡単で、とても便利だと思いましたが、私が決して扱えなかったことが1つあります。それは、スパンタグです。

私が抱えている問題は、スパン内のテキストの2番目の部分を、フォントサイズを小さくし、左にパディングするようにフォーマットしたいということです。2番目のスパンを含めて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;ます。余分な記号がブラウザによって正しくレンダリングされないことがあるため、表示をリテラルにしたい場合は、それらをエンコードするのが常に最も安全です。また、空白を作成するために空のスパンタグを使用することはありません。これは、マークアップが乱雑になる傾向があるためです。

ただし、主な問題は、スパンタグのネスト方法を変更して、テキストの2つのセクションのスタイルが異なるように、スパンタグ内に「>>ExploreFuerteventura」が含まれないようにする必要があることです。マークアップを次のようなものにクリーンアップするだけで、目的を達成できると思います。

<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 に答える