前端课堂笔记：背景样式、固定定位与倒计时

一、底部背景固定（CSS）

核心属性

1. background-image：引入背景图片

2. background-repeat: repeat-x：图片沿水平方向平铺

3. background-position: left bottom：背景定位在页面左下角

4. background-attachment: fixed：背景固定，页面滚动时位置不变

完整代码
body {
background-image: url(../img/bg3.jpg);
background-repeat: repeat-x;
background-position: left bottom;
background-attachment: fixed;
}
二、元素固定定位（position: fixed）

特点：脱离文档流，相对于浏览器窗口固定位置，滚动页面不会移动。

1. 右下角固定图标
   .icon-rb {
   position: fixed;
   right: 20px;
   bottom: 20px;
   z-index: 999; /* 提高层级，防止被遮挡 */
   }
2. 底部居中固定图标

利用偏移+位移实现水平居中
.icon-bc {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 999;
}
三、JS 倒计时功能

实现思路

1. 获取目标时间与当前时间的时间差

2. 换算成天、时、分、秒

3. 定时器循环更新时间，时间结束给出提示

完整代码示例