成都百度快照优化|成都百度关键词排名优化|成都SEO【思为网络】 --【思为网络】成都专业网站优化公司,公司拥有专业搜索引擎优化团队,提供网站整站优化(网站结构优化、网站内容优化、网站外部优化)、百度排名首页优化、GOOGLE优化排名
成都百度关键词排名优化--成都百度快照首页排名优化
你的位置:首页 » 网页设计制作 » 正文

用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>
这样就给图片加上透明效果的说明文字了。

已有0位网友发表了一针见血的评论,你还等什么?

必填

选填

选填

记住我,下次回复时不用重新输入个人信息

必填,不填不让过哦,嘻嘻。

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关推荐