在CSS中,我們可以使用position
屬性來實(shí)現(xiàn)文字在圖片中的滾動(dòng)效果,以下是一個(gè)簡(jiǎn)單的示例:
HTML代碼:
<div class="image-container"> <img src="your-image-url" alt="Background Image"> <div class="text"> 你的文字內(nèi)容 </div> </div>
CSS代碼:
.image-container { position: relative; width: 300px; /* 你可以根據(jù)需要設(shè)置圖片的寬度 */ height: 200px; /* 你可以根據(jù)需要設(shè)置圖片的高度 */ } .image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-container .text { position: absolute; top: 50%; /* 你可以根據(jù)需要調(diào)整文字的位置 */ left: 50%; /* 你可以根據(jù)需要調(diào)整文字的位置 */ transform: translate(-50%, -50%); /* 使得文字居中顯示 */ font-size: 24px; /* 你可以根據(jù)需要設(shè)置文字的大小 */ color: #fff; /* 你可以根據(jù)需要設(shè)置文字的顏色 */ }
在這個(gè)示例中,我們創(chuàng)建了一個(gè)包含圖片和文字的容器,圖片被設(shè)置為***定位,并填充整個(gè)容器,文字則被設(shè)置為***定位,并通過transform
屬性調(diào)整其位置,使其居中顯示在圖片上,你可以根據(jù)需要調(diào)整文字的位置、大小和顏色。