怎么使用css制作图片文字排版

这篇文章将为大家详细讲解有关怎么使用css制作图片文字排版，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

html+css图片文字排版的基本流程。

主要使用CSS属性visibility: hidden;将p标签文字隐藏起来，再通过hover选择器来改变类card的高度，将p标签文字visibility: visible;显示出来。

1、首先html创建新文件，定义3个div标签。

                
                        
                                
                                                                                                                
                                
                                        
                                                第一次班级聚会                                        
                                
                                
                                        
                                                还记的，2018年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山，                                                一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起，                                                有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。                                        
                                
                        
                                                
                                
                                                                        
                                
                                        
                                                优秀班级评比                                        
                                                                        
                                
                                        
                                                还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照，                                                参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来，                                                争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。                                        
                                
                        
                                                
                                
                                                                        
                                
                                        
                                                团日活动                                        
                                
                                
                                        
                                                还记得，大二下学期，大家为了完成辅导员下发了"最美北海"我为北海做的那些事志愿活动，                                                我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，                                                看到旁边的人举起大拇指，感觉此刻值了。                                        
                                
                        
                
        

2、div盒子的class设置为container，可以避免浮动布局时出现的底部对不齐情况。

3、给container添加样式设置：display: flex弹性布局；align-items: center纵轴方向居中对齐；justify-content: left轴方向左对齐即可。

                                
                        
                                
                                                                                                                
                                
                                        
                                                第一次班级聚会                                        
                                
                                
                                        
                                                还记的，2018年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山，                                                一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起，                                                有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。                                        
                                
                        
                                                
                                
                                                                        
                                
                                        
                                                优秀班级评比                                        
                                                                        
                                
                                        
                                                还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照，                                                参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来，                                                争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。                                        
                                
                        
                                                
                                
                                                                        
                                
                                        
                                                团日活动                                        
                                
                                
                                        
                                                还记得，大二下学期，大家为了完成辅导员下发了"最美北海"我为北海做的那些事志愿活动，                                                我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，                                                看到旁边的人举起大拇指，感觉此刻值了。                                        
                                
                        
                
        

关于"怎么使用css制作图片文字排版"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。