1 CSS图像风格样式
1.1 圆角图片
1.1.1 图片效果
1.1.2 样式定义
.img-rounded{
border-radius: 6px;
}
1.2 圆形图片
1.2.1 图片风格
1.2.2 样式定义
.img-circle{
border-radius: 50%;
}
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);
}