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

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

2021-09-14 19:00:59

之前的文章《》中，給大家介紹了怎麼使用css製作表格邊框設定效果。下面本篇文章給大家介紹如何用css製作圖片文字排版的方法，我們一起看看怎麼做。

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

2121.gif

主要使用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，完成！！

完整程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS圖片文字排版</title>
		<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;
			}
		</style>
	</head>
	<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>
</html>

推薦學習：

以上就是新手篇：如何用css製作圖片文字排版（程式碼分享）的詳細內容，更多請關注TW511.COM其它相關文章！