图片排版

1 CSS图像风格样式

1.1 圆角图片

1.1.1 图片效果

1.1.2 样式定义

.img-rounded{
		border-radius: 6px;
		/* 圆角图片(IE8不支持) */
}

1.2 圆形图片

1.2.1 图片风格

1.2.2 样式定义

.img-circle{
	border-radius: 50%;
	/* 圆形图片(IE8不支持) */
}

1.3 简单白色框架图片

1.3.1 图片效果

1.3.2 样式定义

.img-thumbnail{	
	display: inline-block;
	max-width: 100%;
	height: auto;
	padding:4px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;	
}

2 叠加样式图片标题排版

2.1 叠加式图片标题效果

2.2 HTML文档

<div class="pic-txt">
	<img src="images/img.jpg" />
	<div class="title">美丽的校园风景</div>
</div>

2.3 CSS样式

.pic-txt{
	/* 父元素相对定位 */
	position: relative;
	margin: 0 auto;
	width:480px;
	height: 268px;;
}
.pic-txt img{
	/* 设置图片大小等于父容器大小 */
	width: 100%;
	height: 100%;
}
.title{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 14px;
	color: #fff;
	height: 35px;
	line-height: 35px;
	text-align: center;
	background-color: rgba(0,0,0,.5);/* 背景半透明 */
}