1

画像の上にタイトルを重ねたい。それは簡単ですが、特定の幅にして、テキストをブロックで表示したいのです。ここに私が欲しいもののイメージがあります:

ここに画像の説明を入力

できればCSSでやりたいのですが、Javascriptでも問題ありません。

4

7 に答える 7

4

ここで実際の例を参照してください。これを試して:

HTML :

<div>
    <span>Hello world</span><br>
    <span>More text here</span>
</div>

<strong>CSS:

div {
    width: 400px;
    height: 400px;
    background-image: url(http://www.hotels.tv/london-hotels/images/destinations/1/w97654_8.jpg);
    background-repeat: no-repeat;
    background-image-width: 100%;

}
div span {
    font-size: 30px;
    position: relative;
    top: 100px;
    background-color: gray;
    color: white;
}
​

編集

このでは、親でdisplay: table-cellとを使用して、テキストを下に揃えます。vertical-align: bottom

編集2

背景を透明にするには、この例のように rgba() を使用します。

編集3

テキストを右揃えにするには、このtext-align: rightのように親に設定します

于 2012-04-14T15:54:16.107 に答える
2

見た目を正確にするには少し調整が必要かもしれませんが、ここからが出発点です。

<style>
    #image_container {
        position: relative;
        background-image: url(path/to/image) no-repeat;
        width: 500px;
        height: 500px;
    }
    #image_container .title {
        position: absolute;
        top: 300px;
        background: #000;
        background: rgba(0,0,0,0.75);
        color: white;
        font-size: 30px;
        font-weight: bold;
    }
</style>
<div id="image_container">
    <div class="title">
        <p>Some Text</p>
    </div>
</div>
于 2012-04-14T15:47:53.567 に答える
1

私はrgbaを使用します...基本的には次のようになります:

span {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 17px;
}

http://jsfiddle.net/TCtR5/3/

于 2012-04-14T16:10:50.317 に答える
1

これで始められるかもしれません: http://jsfiddle.net/FyL6J/

jQuery を使用してこれを行わなければならない理由はありませんが、.position()役立つと思います。

于 2012-04-14T15:54:58.900 に答える
1

このようなもの?http://jsfiddle.net/EcXZZ/

于 2012-04-14T15:55:50.123 に答える
1

私がそうする最初の最も簡単な方法は、希望の不透明度を持つ png 画像を取得することです。たとえば、タイトルの背景に不透明度 40% の 1x1 RGB(0,0,0) ピクセルを使用し、CSS を次のように設定します。

<style>
  .image_holder
  {
    position: absolute;
    left: 10px;
    top: 10px;
  }
  .image_holder > img
  {
    position: absolute;
    left: 0;
    top: 0;
  }
  .image_title_overlay
  {
    position: absolute;
    left: 0;
    top: 120px;
    background-image: url('images/black.40%opacity.1x1.png');
    color: 'white';
    padding: 10px 12px;
  }
</style>
<div class="image_holder">
  <img src="image_url.jpg"/>
  <p class="image_title_overlay">A Movie in the Park: <br/>Kung Fu Panda</p>
</div>
于 2012-04-14T15:57:13.157 に答える