サンプル
逆襲ガノトトス 音爆弾投げてみた。
|
|
ライオン 昼寝中
|
javaスクリプトに慣れてくると、なんてもスクリプトでどうにかしてしまいそうになるのですが、スタイルシートだけでもこんなキャプションをつけたり、画像を重ね合わせて装飾を施すことが出来ます。
サンプルでは、左上に画像を重ねて、真下に半透明なキャプションをつけています。
折りたたむ
|
<style>
<!-- 1枚目の画像 -->
<!-- 上に重ねる画像のスタイル -->
img.front {
width: 55px;
height: 55px;
position:absolute;
z-index: 2;
margin:-10px 0px 0px -10px ; }
<!-- 下に来る画像のスタイル -->
img.back{
width: 240px;
height: 192px;
z-index: 1;
margin: 0 ;
}
<!-- キャプションをつける画像のスタイル -->
.img-desc {
position: relative;
display: block;
height:192px;
width: 240px;
}
<!-- キャプションのスタイル -->
.img-desc cite {
background: #111;
-moz-opacity:.55;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 240px;
padding:0px;
border-top: 1px solid #999;
margin:0px 0px 0px 0px;
}
<!-- 2枚目の画像 -->
img.front2 {
width: 55px;
height: 55px;
position:absolute;
z-index: 2;
margin:-10px 0px 0px -10px ; }
img.back2{
width: 200px;
height: 285px;
z-index: 1;
margin:0px 0px 0px 0px ;
}
.img-desc2 {
position: relative;
display: block;
height:285px;
width: 200px;
}
.cite {
background: #111;
-moz-opacity:.55;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 200px;
padding:0px;
border-top: 1px solid #999;
margin:0px 0px -95px 0px;
}
</style>
<div class="img-desc">
<img src="前景画像パス" class="front">
<img src="後景画像パス" class="back">
</a>
<cite>表示キャプション</cite> <!-- ←通常こっち -->
</div>
<div class="img-desc">
<img src="前景画像パス" class="front2">
<img src="後景画像パス" class="back2">
<span class="cite" style="font-size: 14px;"><!-- ←classで通す --> ライオン 昼寝中</span">
</div"><!-- ←このページでのやり方 -->
|
テーマ : ★★おすすめ♪★★ - ジャンル : ブログ
タグ : html/css 画像ギャラリー系
2008/12/23 06:20 |
何でも挑戦!ブログカスタム
| COMMENT(0)
| TRACKBACK(0)
TOP
トラックバック Trackback URL
この記事にトラックバックする(FC2ブログユーザー)