新手篇：如何用css制作图片文字排版（代码分享）-css教程-PHP中文网

首页

web前端

css教程

新手篇：如何用css制作图片文字排版（代码分享）

奋力向前

Sep 14, 2021 pm 05:43 PM

css

之前的文章《手把手教你使用css制作表格边框设置效果（附代码）》中，给大家介绍了怎么使用css制作表格边框设置效果。下面本篇文章给大家介绍如何用css制作图片文字排版的方法，我们一起看看怎么做。

新手篇：如何用css制作图片文字排版（代码分享）

网页中常常有这样的CSS图片文字排版，给大家分享一下看效果图看完效果，我们来研究一下是怎么实现呢，给大家用于讲解html+css图片文字排版的基本流程。

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

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

<body>

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

登录后复制

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

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

<style type="text/css">
			.container{
				width: 100%;
				height: 500px;
				padding: 0px 40px;
				display: flex;
				align-items: center;
				justify-content: left;
			}

登录后复制

代码效果

微信截图_20210914165944.png

4、给card添加样式设置：transition属性鼠标悬停；box-shadow设置阴影效果；background-color属性元素的背景色。

.card{
				height: 270px;
				max-width: 350px;
				margin: 0px 20px;
				background-color: white;
				transition: 0.4s;
				box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
			}

登录后复制

5、给hover选择器选择鼠标移样式。

.card:hover{
				height:400px;
				box-shadow:5px 5px 10px rgba(0,0,0,0.2);
			}

登录后复制

6、使用img标签处理图片尺寸宽度和高度，object-fit: cover切割图片，保留图片原比例大小。

.card .img{
				height: 200px;
				width: 100%;
			}
			.card .img img{
				height: 100%;
				width: 100%;
				object-fit: cover;
			}

登录后复制

7、visibility: hidden;将p标签文字隐藏起来添加transition属性鼠标悬停。

.card .bottom-text{
				text-indent: 2em;
				padding: 0 20px 10px 20px;
				margin-top: 5px;
				 background-color: white;
				 visibility: hidden;
				 transition: 0.5s;

登录后复制

8、hover选择器来改变类card的高度，将p标签文字visibility: visible;显示出来。

			.card:hover .bottom-text{
				opacity: 1;
				visibility: visible;

登录后复制

ok，完成！！

完整代码



	
		
		CSS图片文字排版
		<style type="text/css">
			.container{
				width: 100%;
				height: 500px;
				padding: 0px 40px;
				display: flex;
				align-items: center;
				justify-content: left;
			}
			.card{
				height: 270px;
				max-width: 350px;
				margin: 0px 20px;
				background-color: white;
				transition: 0.4s;
				box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
			}
			.card:hover{
				height:400px;
				box-shadow:5px 5px 10px rgba(0,0,0,0.2);
			}
			.card .img{
				height: 200px;
				width: 100%;
			}
			.card .img img{
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
			.card .top-text{
				padding-top: 5px;
			}
			.card .top-text .name{
				font-size: 25px;
				font-weight:600;
				color: #202020;
			}
			.card .top-text p{
				font-size: 20px;
				font-weight:600;
				color: #e74c3c;
				line-height: 20px;
			}
			.card .bottom-text{
				text-indent: 2em;
				padding: 0 20px 10px 20px;
				margin-top: 5px;
				 background-color: white;
				 visibility: hidden;
				 transition: 0.5s;
			}
			.card:hover .bottom-text{
				opacity: 1;
				visibility: visible;
			}
			.card .bottom-text .text{
				text-align: justify;
			}
		
	
	
		
			
				
					
					
				
				
					
						第一次班级聚会
					
				
				
					
						还记的，2018年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山，
						一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起，
						有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。
					
				
			
			
			
				
					
				
				
					
						优秀班级评比
					
					
				
				
					
						还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照，
						参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来，
						争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。
					
				
			
			
			
				
					
				
				
					
						团日活动
					
				
				
					
						还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动，
						我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，
						看到旁边的人举起大拇指，感觉此刻值了。

登录后复制

推荐学习：CSS视频教程

以上是新手篇：如何用css制作图片文字排版（代码分享）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7888

Java教程

1649

CakePHP 教程

1410

Laravel 教程

1301

PHP教程

1246

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。