background-attachment 製作視差滾動效果（parallax）linear-gradient 與 radial-gradient 的用法<body>
<h1>CSS 背景進階示範</h1>
<section class="gradient-box">這是一個線性漸層背景</section>
<section class="radial-box">這是一個放射漸層背景</section>
<section class="parallax">這是一個視差滾動效果</section>
</body>
body {
margin: 0;
font-family: "Microsoft JhengHei", sans-serif;
text-align: center;
}
h1 {
margin: 20px 0;
}
section {
margin: 30px auto;
width: 80%;
padding: 60px 20px;
color: white;
font-size: 20px;
border-radius: 8px;
}
/* 線性漸層 */
.gradient-box {
background: linear-gradient(135deg, #3498db, #9b59b6);
}
/* 放射漸層 */
.radial-box {
background: radial-gradient(circle, #f39c12, #d35400);
}
/* 視差滾動 */
.parallax {
background-image: url("https://picsum.photos/1200/800");
background-size: cover;
background-attachment: fixed;
background-position: center;
color: #fff;
}
background-position 控制對齊background-attachment: fixed）background-position 對效果的影響今天的主題是 CSS 背景進階，讓我發現原來背景不只是「圖片」或「顏色」，而是可以用漸層和多重背景創造出更有設計感的效果。
我最喜歡的是 linear-gradient，只要調整角度和顏色，就能做出很酷的背景，而 radial-gradient 則很適合用來模擬聚光燈或按鈕的立體感。
另外，視差滾動（parallax）效果也很有趣，讓網頁在捲動時多了一種深度感。不過我也注意到大圖會影響效能，所以圖片壓縮和選材就變得很重要。
這讓我意識到，CSS 不只是單純的裝飾，而是能讓網頁「講故事」。透過背景層次的變化，可以引導視覺焦點，也能讓內容更有氛圍感。
iThome鐵人賽
看影片追技術