CSSメモ_1：半透明の背景を画像に重ね、キャプションを表示する

そこそこ普通に使っているCSSですが、ブラウザの違いでうまく動作しない場合はもちろん、単純な指定ミスなどで時間をとられることが未だ多い僕です。その都度調べながら、ハック的な情報を吸収するのですが忘れてしまう…てことで、CSSのメモを兼ねて勉強することにしました。

第1回目は「半透明の背景を画像に重ね、キャプションを表示する」です。"5 Ways to Spice up Your Images with CSS"の"Image with Caption"を参考にしております。

demoを見る

HTML
<div id="desc">
<img id="image" src="sample.jpg" alt="test" />
<cite>2008年11月11日 福岡市動物園にて</cite>
</div>
CSS
#desc{
position:relative;
display:block;
width:406px;
height:306px;
}

#image{
padding:2px;
border:1px solid #999;
}

cite{
font-style:normal;/* citeはitaric表示になるため */
font-size:1em;
background:#000;
-moz-opacity:.65;/* もう少ないだろうけどNN用 */
filter:alpha(opacity=65);/* IE用 */
opacity:.65;/* Firefox,Safari,Opera用 */
color:#fff;
position:absolute;
bottom:3px;
left:3px;
width:397px;
padding:5px 0px 5px 3px;
}
こんな具合です。
1度見てしまえば簡単やなとか思うわけですが、自力でやったら出来んかった…。メモとしては、クロスブラウザ対応の透過の書き方で、これはチェックです。引き続き気付いた点があればメモしていこうと思います。

＊余談
以前のエントリーで、コードをわかりやすく表示してくれるプログラムを入れたのですが、bloggerの僕の設定ではコード内の改行が<br>で表示されるため使うのやめました。なので、見にくいですが<code>～</code>でやらせていただきます。

《関連記事》

• "css Zen Garden"に挑戦
• 『position』て何？