用CSS給網頁中圖片添加說明文字的實例

2010-5-11 0:0:0 | 作者：sw996 | 0個評論 | 人瀏覽

用CSS給圖片加說明文字并不困難，這里我們用一種更靈活的方法來給網頁中的圖片加上說明文字，這里要使用CSS中 絕對定位和設置透明度方法來實現。

CSS代碼：

.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}

HTML代碼：

<div class="img-desc">
	<img src="http://www.goodtext.org/img/602x404.jpg" alt="www.

goodtext.org" />

	<cite>www.goodtext.org - 602x404.jpg</cite>
</div>

這樣就給圖片加上透明效果的說明文字了。

本文來自: 成都百度快照優化|成都百度關鍵詞排名優化|成都SEO【思為網絡】，轉載請保留出處！歡迎發表您的評論

相關標簽：

相關推薦