首頁 >web前端 >css教學 >新手篇：如何用css製作圖片文字排版（程式碼分享）

新手篇：如何用css製作圖片文字排版（程式碼分享）

奋力向前原創: 2021-09-14 17:43:575921瀏覽

在

之前的文章《手把手教你用css製作表格邊框設定效果（附程式碼）》中，跟大家介紹了怎麼使用css製作表格邊框設定效果。以下這篇文章跟大家介紹如何用css製作圖片文字排版的方法，我們一起看看怎麼做。

網頁中常常有這樣的CSS圖片文字排版，跟大家分享一下看效果圖看完效果，我們來研究一下是怎麼實現呢，給大家用於講解html css圖片文字排版的基本流程。

新手篇：如何用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"  alt="新手篇：如何用css製作圖片文字排版（程式碼分享）" >
					<!-- 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"  alt="新手篇：如何用css製作圖片文字排版（程式碼分享）" >
				</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"  alt="新手篇：如何用css製作圖片文字排版（程式碼分享）" >
				</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;
			}

程式碼效果

新手篇：如何用css製作圖片文字排版（程式碼分享）

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中文網其他相關文章！

css html Object class 选择器 display background transition flex

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解CSS中的偽元素::before和::after下一篇：詳解CSS中的偽元素::before和::after

看更多