如何 - 滾動時改變背景
學習如何使用 CSS 在滾動時改變背景圖片。
滾動時改變背景圖片
在框架內向下滾動檢視效果
如何實現滾動時改變背景圖片
步驟 1) 新增 HTML
示例
<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>
<div class="bg-text">TEXT</div>
步驟 2) 新增 CSS
示例
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
在上面的示例中，我們使用了畫素來設定影像的高度。如果您想使用百分比，例如 100%，使影像適應整個螢幕，請將視差容器的高度設定為 100%。注意：您還必須為 <html> 和 <body> 應用 height: 100%。
height: 50%;
/* 漂亮地居中並縮放圖片 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 使用的圖片 */
.img1 { background-image: url("img_snow.jpg"); }
.img2 { background-image: url("img_girl.jpg"); }
.img3 { background-image: url("img_lights.jpg"); }
.img4 { background-image: url("img_nature.jpg"); }
.img5 { background-image: url("img_forest.jpg"); }
.img6 { background-image: url("img_woods.jpg"); }
/* 將文字定位在頁面/圖片的中間 */
.bg-text {
background-color: rgb(0,0,0); /* 備用顏色 */
background-color: rgba(0,0,0, 0.4); /* 黑色帶透明度 */
color: white;
font-weight: bold;
font-size: 80px;
border: 10px solid #f1f1f1;
position: fixed; /* 保持固定 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}
自己動手試一試 »
