画像の上にタイトルを重ねたい。それは簡単ですが、特定の幅にして、テキストをブロックで表示したいのです。ここに私が欲しいもののイメージがあります:
できればCSSでやりたいのですが、Javascriptでも問題ありません。
画像の上にタイトルを重ねたい。それは簡単ですが、特定の幅にして、テキストをブロックで表示したいのです。ここに私が欲しいもののイメージがあります:
できればCSSでやりたいのですが、Javascriptでも問題ありません。
ここで実際の例を参照してください。これを試して:
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
のように親に設定します
見た目を正確にするには少し調整が必要かもしれませんが、ここからが出発点です。
<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>
私はrgbaを使用します...基本的には次のようになります:
span {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 17px;
}
これで始められるかもしれません: http://jsfiddle.net/FyL6J/
jQuery を使用してこれを行わなければならない理由はありませんが、.position()
役立つと思います。
このようなもの?http://jsfiddle.net/EcXZZ/
私がそうする最初の最も簡単な方法は、希望の不透明度を持つ 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>