流星雨背景是一種網頁背景效果，通過CSS屬性的設置，可以創造一種流星雨落下的效果，給人帶來視覺上的沖擊及感受。

/*
 * 流星雨背景
 */
body {
background: #000 url(https://cdn.jsdelivr.net/gh/lmfres/static/img/meteor.png) repeat;
background-position: top center; 
background-attachment: fixed;
}
/* 關鍵幀動畫 */
@keyframes meteor {
from {
opacity: 1;
transform: translateY(-500px) rotate(20deg) scale(1); 
/* opacity：不透明度，初始為1 */
/* translateY：從上向下移動500px */
/* rotate：參數20deg為角度，使得流星略帶傾斜 */
/* scale：大小為原始大小 */
}
to {
opacity: 0;
transform: translateY(1000px) rotate(-20deg) scale(0.2); 
/* opacity：不透明度，結束為0 */
/* translateY：移動到1000px，此時流星離視口消失 */
/* rotate：反轉20度 */
/* scale：縮小到原來的0.2 */
}
}
/* 流星的樣式 */
.meteor {
position: absolute;
top: -500px; 
/* 初始為負數，使得流星在上方消失的時候可以順滑出現 */
left: 50%;
transform: rotate(-20deg); 
/* 使得流星略帶傾斜 */
opacity: 0;
/* opacity：初始為0，流行出現的時候緩慢淡入 */
}
/* 流星的圖片 */
.meteor img {
width: 100px;
height: 20px; 
/* 根據實際圖片的大小設置 */
}
/* 生成流星 */@for $i from 1 through 10 {
.meteor:nth-child(#{$i}) {
top: #{random(1000)}px;animation: meteor #{random(10)}s ease-in-out infinite;
left: #{random(100)}%;}
}
/* 工具函數 */
@function random($i) {
@return random($i);
}

以上是使用 CSS 制作流星雨背景的示例代碼，可以通過復制代碼到您的項目中進行實踐，實現流星雨背景這一酷炫的效果。