/*样式代码开始*/
.container{
position:relative; /*让子元素相对于该元素定位*/
width:300px;
height:200px;
}
.container img{
width:100%;
height:100%;
}
.container p{
position:absolute; /*定位到容器上*/
bottom:0; /*距离底部为0*/
left:0; /*距离左边为0*/
width:100%; /*宽度等于容器*/
background:rgba(0,0,0,0.5); /*设置背景透明度*/
padding:5px; /*设置文字边距*/
color:#fff; /*设置文字颜色*/
}
/*样式代码结束*/以上代码实现了一个容器（class=”container”），里面有一张图片和一段文字。图片会自适应容器大小，文字会显示在图片下方（距离底部为0），文字背景透明度为50%（rgba(0,0,0,0.5)），文本颜色为白色（#fff）。现在，大家将所有内容放在div容器中。
css名称冒号，旋转角度css，css怎么画桃心，css词间距怎么调，html5+css3模板，星号在css里面代表什么，css伪类选择器 博客园文字描述
以上就是CSS模板制作图片加文字的过程，大家可以根据实际需求修改样式代码和HTML代码来达到更好的效果。