交互设计中心-72色

此例和上例有些共同点，同是应用相对定位和绝对定位的方法。本例使用了cite标签定义说明文字的方法。通过这几个例子，希望能让你掌握css对图片的控制、相对定位和绝对定位、css背景的应用和标签的灵活运行等。

 <style type="text/css">body { text-align: center; font-family:Verdana; font-size:14px; }.img-demo { position: relative; display: block; height:500px; width: 335px; margin: 0 auto; }.img-demo cite { background: #333; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; color: #fff; position: absolute; bottom: 0; left: 0; width: 335px; padding: 10px 0; border-top: 1px solid #999; }</style></p><div class="img-demo"><img alt="" src="uploadfile/sample.jpg" /> <cite>Today is a greet day! 2008-12-16</cite></div><p>

　　实现方法：通过相对定位和绝对定位来定位说明文字的位置。本例中一个难点就是层透明度问题，大家可以看到cite层的透明使用了-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; 这三个样式来实现，这是为了兼容各个浏览器的。 　　下面看演示：

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><style type="text/css">body { text-align: center; font-family:Verdana; font-size:14px; }.img-demo { position: relative; display: block; height:500px; width: 335px; margin: 0 auto; }.img-demo cite { background: #333; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; color: #fff; position: absolute; bottom: 0; left: 0; width: 335px; padding: 10px 0; border-top: 1px solid #999; }</style></p><h2>将图片的说明显示在图片之上且背景半透明效果</h2><div class="img-demo"><img alt="" src="http://www.aa25.cn/uploadfile/sample.jpg" /> <cite>Today is a greet day! 2008-12-16</cite></div><h3>标准之路&mdash;&mdash;<a href="http://www.aa25.cn/">www.aa25.cn</a>　转载请注明出处</h3><p>