diff --git "a/\345\217\266\345\255\220\350\241\241/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247\350\257\246\350\247\243.md" "b/\345\217\266\345\255\220\350\241\241/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ebebe93fb3bdc11c63baf94caf6bb8021b8be203
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247\350\257\246\350\247\243.md"
@@ -0,0 +1,157 @@
+# 20240930第十次课笔记
+
+## CSS 背景属性详解
+
+### 1. `background-color` 背景颜色
+
+- **作用**：用于设置元素的背景颜色，可以使用颜色名称、十六进制颜色代码、RGB 颜色值、RGBA 颜色值等方式来定义。
+- **属性值**：
+  - **颜色名称**：如 `red`、`blue`、`green` 等。
+  - **十六进制**：以 `#` 开头，后跟 6 个字符（如 `#ff99ff`），分别表示红色、绿色和蓝色的值。
+  - **RGB 表示法**：`rgb(255, 153, 255)`，分别表示红色、绿色和蓝色的值，范围是 0~255。
+  - **RGBA 表示法**：`rgba(255, 153, 255, 0.5)`，与 RGB 类似，但多了一个透明度的值，范围是 0~1。
+- **示例**：
+  ```css
+  background-color: red; /* 使用颜色名称 */
+  background-color: #ff99ff; /* 使用十六进制颜色 */
+  background-color: rgb(255, 153, 255); /* 使用 RGB 颜色 */
+  background-color: rgba(255, 153, 255, 0.5); /* 使用 RGBA 颜色，并设置透明度 */
+  ```
+
+### 2. `background-image` 背景图像
+
+- **作用**：用于为元素设置背景图像，可以使用 URL 地址来指定图像文件。
+- **属性值**：
+  - **URL 地址**：图像的路径，如 `url('images/bg.jpg')` 或 `url('https://example.com/image.png')`。
+  - 如果使用的是本地路径，建议确保路径相对于 CSS 文件的相对位置是正确的。
+- **示例**：
+  ```css
+  background-image: url('images/bg.jpg'); /* 使用本地路径 */
+  background-image: url('https://example.com/image.png'); /* 使用网络图像 */
+  ```
+- **注意**：如果图像地址无效或加载失败，元素的背景将不会显示图像。
+
+### 3. `background-repeat` 背景图像重复方式
+
+- **作用**：用于控制背景图像在元素中的平铺方式，默认情况下，背景图像会在水平和垂直方向上平铺，填充整个元素。
+- **常用属性值**：
+  - `no-repeat`：背景图像不会平铺，只显示一次。
+  - `repeat-x`：背景图像仅在水平方向平铺。
+  - `repeat-y`：背景图像仅在垂直方向平铺。
+  - `repeat`（默认值）：背景图像在水平方向和垂直方向都平铺。
+  - `space`：背景图像按整数倍平铺，剩余空间会被均匀地分隔开。
+  - `round`：背景图像按整数倍平铺，可能会调整图像的大小，使其正好填满整个容器。
+  
+- **示例**：
+  ```css
+  background-repeat: no-repeat; /* 背景图像不平铺 */
+  background-repeat: repeat-x; /* 背景图像在水平方向平铺 */
+  background-repeat: repeat-y; /* 背景图像在垂直方向平铺 */
+  background-repeat: repeat; /* 背景图像在两个方向都平铺 */
+  background-repeat: space; /* 背景图像按整数倍平铺，并均匀分隔 */
+  background-repeat: round; /* 背景图像按整数倍平铺，并调整大小 */
+  ```
+
+### 4. `background-position` 背景图像位置
+
+- **作用**：用于设置背景图像在元素中的具体位置。可以通过关键词（如 `left`、`center`、`right`、`top`、`bottom`）来描述，也可以使用具体的数值（如像素、百分比）来定位。
+  
+- **常用属性值**：
+  - 使用关键词描述位置：
+    - `left`：背景图像位于容器的左侧。
+    - `center`：背景图像位于容器的中心。
+    - `right`：背景图像位于容器的右侧。
+    - `top`：背景图像位于容器的顶部。
+    - `bottom`：背景图像位于容器的底部。
+
+    关键词可以组合使用，例如 `background-position: center top;` 表示背景图像在容器的水平居中、垂直顶部位置。
+  
+  - 使用像素值描述位置：
+    - 语法：`background-position: 水平方向偏移量 垂直方向偏移量;`
+    - 可以是正数或负数，例如 `background-position: 100px 200px;`，表示图像向右偏移 100 像素，向下偏移 200 像素；`-50px -100px` 表示图像向左偏移 50 像素，向上偏移 100 像素。
+
+- **示例**：
+  ```css
+  background-position: center center; /* 背景图像居中显示 */
+  background-position: left top; /* 背景图像位于左上角 */
+  background-position: 50px 100px; /* 背景图像向右偏移50px，向下偏移100px */
+  background-position: -30px -50px; /* 背景图像向左偏移30px，向上偏移50px */
+  ```
+
+### 5. `background-attachment` 背景图像附着方式
+
+- **作用**：用于控制背景图像在滚动时是否固定在视口中，还是随内容一起滚动。
+- **常用属性值**：
+  - `scroll`（默认值）：背景图像随元素内容滚动。
+  - `fixed`：背景图像固定在视口中，不随元素内容滚动。
+  - `local`：背景图像随元素的内容滚动，而不是整个视口。
+  
+- **示例**：
+  ```css
+  background-attachment: scroll; /* 背景图像随内容滚动 */
+  background-attachment: fixed; /* 背景图像固定在视口 */
+  background-attachment: local; /* 背景图像随元素内容滚动 */
+  ```
+
+### 6. `background-size` 背景图像大小
+
+- **作用**：用于设置背景图像的尺寸，可以使用具体的数值（像素、百分比），也可以使用关键字 `cover` 或 `contain` 来描述。
+  
+- **常用属性值**：
+  - **具体数值**：可以设置背景图像的宽度和高度，如 `background-size: 100px 200px;` 表示宽度 100 像素，高度 200 像素。
+  - **百分比**：可以使用百分比值相对于容器大小来设置尺寸，例如 `background-size: 50% 50%;` 表示图像宽度和高度均占容器的 50%，可以简写为 `background-size: 50%;`。
+  - **关键字**：
+    - `cover`：图像始终填满整个容器，并保持长宽比例不变，超出部分会被裁剪。
+    - `contain`：图像完整显示在容器中，并保持长宽比例不变，可能会在容器的某些区域留白。
+
+- **示例**：
+  ```css
+  background-size: 100px 200px; /* 背景图像宽度100px，高度200px */
+  background-size: 50% 50%; /* 背景图像宽高各占容器的50% */
+  background-size: cover; /* 背景图像填满容器 */
+  background-size: contain; /* 背景图像完整显示在容器中 */
+  ```
+
+### 7. RGB 表示法
+
+- **作用**：通过红（Red）、绿（Green）、蓝（Blue）三原色的组合来定义颜色，每个颜色的取值范围为 0~255。
+- **语法**：
+  - `rgb(R, G, B)`，其中 R、G、B 的取值范围是 0 到 255。
+- **示例**：
+  ```css
+  background-color: rgb(255, 0, 0); /* 红色 */
+  background-color: rgb(0, 255, 0); /* 绿色 */
+  background-color: rgb(0, 0, 255); /* 蓝色 */
+  ```
+
+### 8. RGBA 表示法
+
+- **作用**：在 RGB 基础上增加透明度（Alpha），Alpha 取值范围为 0（完全透明）到 1（完全不透明）。
+- **语法**：
+  - `rgba(R, G, B, A)`，其中 A 表示透明度的值，取值范围为 0 到 1。
+- **示例**：
+  ```css
+  background-color: rgba(255, 0, 0, 0.5); /*
+
+ 半透明红色 */
+  background-color: rgba(0, 255, 0, 0.8); /* 半透明绿色 */
+  background-color: rgba(0, 0, 255, 0.3); /* 半透明蓝色 */
+  ```
+
+### 9. `background` 简写属性
+
+- **作用**：可以将 `background-color`、`background-image`、`background-repeat`、`background-position`、`background-size`、`background-attachment` 等属性合并成一个 `background` 简写属性。
+- **语法**：
+  ```css
+  background: [背景颜色] [背景图像] [平铺方式] [位置] / [背景尺寸] [附着方式];
+  ```
+- **示例**：
+  ```css
+  background: url('https://example.com/image.png') no-repeat center center / cover fixed;
+  ```
+  该示例的含义是：
+  - 使用 `https://example.com/image.png` 作为背景图像。
+  - 不平铺背景图像（`no-repeat`）。
+  - 图像居中显示（`center center`）。
+  - 图像覆盖容器（`cover`）。
+  - 背景图像固定不随内容滚动（`fixed`）。
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/20241009-CSS\351\242\234\350\211\262\346\270\220\345\217\230.md" "b/\345\217\266\345\255\220\350\241\241/20241009-CSS\351\242\234\350\211\262\346\270\220\345\217\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6cac8464bd1eda54d60811907cee19fa0a5f0cba
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241009-CSS\351\242\234\350\211\262\346\270\220\345\217\230.md"
@@ -0,0 +1,84 @@
+#  20241009第十一次课笔记
+
+## 1. 线性渐变（`linear-gradient`）
+
+**语法：**
+
+```css
+background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+```
+
++ **线性渐变基本结构：**
+  - 必须定义至少两个颜色节点
+  - 可以指定一个方向或角度（角度值以 `deg` 为单位）
+
++ **方向类型：**
+  - `to left`：从右向左渐变
+  - `to right`：从左向右渐变
+  - `to top`：从下向上渐变
+  - `to bottom`：从上向下渐变
+  - 默认方向为从上到下的渐变（`to bottom`）
+
++ **角度定义：**
+  - 使用角度值，例如 `30deg`，表示顺时针方向旋转 30 度
+
+### 示例：
+
+1. **简单线性渐变：**
+
+```css
+background-image: linear-gradient(to right, red, green);
+```
+上例表示从左向右的颜色渐变（从红色到绿色）。
+
+2. **角度线性渐变：**
+
+```css
+background-image: linear-gradient(-90deg, red, yellow);
+```
+上例表示从 90 度角（逆时针方向）起的线性渐变。
+
+3. **重复线性渐变：**
+
+```css
+background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
+```
+上例表示将渐变颜色重复显示。
+
+---
+
+## 2. 径向渐变（`radial-gradient`）
+
+**语法：**
+
+```css
+background-image: radial-gradient(辐射半径大小, 中心位置, 起始颜色, 终止颜色);
+```
+
++ **径向渐变基本结构：**
+  - 渐变围绕指定的中心点进行（可以定义渐变半径和中心位置）
+  - 形状默认为椭圆（`ellipse`）
+
++ **形状类型：**
+  - `circle`：圆形渐变
+  - `ellipse`：椭圆形渐变（默认值）
+
++ **中心位置类型：**
+  - 使用关键字：`at left`、`at right`、`at top`、`at bottom`、`at center` 等
+  - 使用像素值：例如 `100px 150px`，表示从盒子左上角起始的具体位置
+
+### 示例：
+
+1. **简单径向渐变：**
+
+```css
+background-image: radial-gradient(circle, red, yellow, green);
+```
+上例表示以圆形为形状，从红色到黄色，再到绿色的径向渐变。
+
+2. **自定义半径及中心位置的径向渐变：**
+
+```css
+background-image: radial-gradient(100px at center, yellow, green);
+```
+上例表示以 `100px` 半径，以盒子中心点（`center`）为起点，从黄色到绿色的渐变。
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240/\346\225\210\346\236\234\345\233\276.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240/\346\225\210\346\236\234\345\233\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9423cd0dbbcba93d38c20d2f1c9c95c55ed1aae7
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240/\346\225\210\346\236\234\345\233\276.md"
@@ -0,0 +1,243 @@
+# 背景属性练习
+
+![梦葉樱图床](https://img.haruka.net.cn/image/2024/10/08/12l2d3j.gif)
+
+# 源码
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>背景属性练习作业</title>
+    <style>
+        /* 基础练习 */
+        .box {
+            background-color: navy; /* 深蓝色背景 */
+            width: 100px;
+            height: 100px;
+            margin-bottom: 20px;
+        }
+
+        .image-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'); /* 背景图片 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        .cover-image {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-size: cover; /* 背景图片填充整个元素 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        .header {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-position: right bottom; /* 背景图像定位到右下角 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .pattern {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-repeat: repeat-y; /* 垂直方向重复 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        /* 进阶练习 */
+        .multi-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'), url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 多重背景 */
+            background-position: center center, left top; /* 背景图像定位 */
+            background-repeat: no-repeat, repeat; /* 背景图像重复方式 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .gradient-box {
+            background: linear-gradient(to right, blue, red); /* 线性渐变 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .cropped-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-position: center; /* 背景图像居中 */
+            background-size: 50% 50%; /* 背景图像缩放 */
+            background-clip: content-box; /* 背景图片裁剪到内容区域 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        .responsive-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-size: contain; /* 背景图像自适应容器大小 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .sticky-footer {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-attachment: fixed; /* 背景图像固定 */
+            background-position: bottom; /* 背景图像位于底部 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        /* 高级练习 */
+        .compact-background {
+            background: url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg') no-repeat center / cover navy;
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .parent {
+            background-color: lightgray; /* 父元素背景颜色 */
+            padding: 20px;
+        }
+
+        .child {
+            background-color: inherit; /* 子元素继承父元素的背景颜色 */
+            width: 100px;
+            height: 100px;
+        }
+
+        .layered-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'), url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 多重背景层 */
+            background-blend-mode: multiply; /* 背景图像混合 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .responsive-image {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-size: cover;
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        @media (max-width: 600px) {
+            .responsive-image {
+                background-image: url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 小屏幕下的背景图像 */
+            }
+        }
+
+        .before-element {
+            position: relative;
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .before-element::before {
+            content: "";
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-position: top center; /* 背景图像在顶部居中 */
+            background-size: 50px 50px;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 50px;
+            height: 50px;
+            transform: translateX(-50%);
+        }
+
+        .dynamic-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+            animation: moveBackground 5s linear infinite; /* 背景移动动画 */
+        }
+
+        @keyframes moveBackground {
+            from { background-position: 0 0; }
+            to { background-position: 100% 0; }
+        }
+
+        .text-over-image {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            color: white;
+            text-shadow: 2px 2px 5px black; /* 文字阴影，确保文字在背景图上清晰可见 */
+            width: 300px;
+            height: 150px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .bordered-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            border: 5px solid #333; /* 边框 */
+            width: 300px;
+            height: 150px;
+            box-sizing: border-box; /* 确保背景图和边框对齐 */
+            margin-bottom: 20px;
+        }
+
+        .shape-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            border-radius: 50%; /* 设置圆形背景 */
+            width: 150px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .hover-effect {
+            background-color: lightblue;
+            width: 300px;
+            height: 150px;
+            transition: background-color 0.3s; /* 背景颜色平滑过渡 */
+            margin-bottom: 20px;
+        }
+
+        .hover-effect:hover {
+            background-color: lightcoral; /* 鼠标悬停时改变背景颜色 */
+        }
+    </style>
+</head>
+<body>
+    <!-- 基础练习 -->
+    <div class="box"></div>
+    <div class="image-background"></div>
+    <div class="cover-image"></div>
+    <div class="header"></div>
+    <div class="pattern"></div>
+
+    <!-- 进阶练习 -->
+    <div class="multi-background"></div>
+    <div class="gradient-box"></div>
+    <div class="cropped-background"></div>
+    <div class="responsive-background"></div>
+    <div class="sticky-footer"></div>
+
+    <!-- 高级练习 -->
+    <div class="compact-background"></div>
+    <div class="parent">
+        <div class="child"></div>
+    </div>
+    <div class="layered-background"></div>
+    <div class="responsive-image"></div>
+    <div class="before-element"></div>
+    <div class="dynamic-background"></div>
+    <div class="text-over-image">文字在背景图片上显示</div>
+    <div class="bordered-background"></div>
+    <div class="shape-background"></div>
+    <div class="hover-effect"></div>
+</body>
+</html>
+```
+
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240/\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240/\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240.html"
new file mode 100644
index 0000000000000000000000000000000000000000..09bd37cd6a5a768280cd46e7a12eba92a9db2a53
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240/\350\203\214\346\231\257\345\261\236\346\200\247\347\273\203\344\271\240.html"
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>背景属性练习作业</title>
+    <style>
+        /* 基础练习 */
+        .box {
+            background-color: navy; /* 深蓝色背景 */
+            width: 100px;
+            height: 100px;
+            margin-bottom: 20px;
+        }
+
+        .image-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'); /* 背景图片 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        .cover-image {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-size: cover; /* 背景图片填充整个元素 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        .header {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-position: right bottom; /* 背景图像定位到右下角 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .pattern {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-repeat: repeat-y; /* 垂直方向重复 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        /* 进阶练习 */
+        .multi-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'), url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 多重背景 */
+            background-position: center center, left top; /* 背景图像定位 */
+            background-repeat: no-repeat, repeat; /* 背景图像重复方式 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .gradient-box {
+            background: linear-gradient(to right, blue, red); /* 线性渐变 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .cropped-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-position: center; /* 背景图像居中 */
+            background-size: 50% 50%; /* 背景图像缩放 */
+            background-clip: content-box; /* 背景图片裁剪到内容区域 */
+            width: 200px;
+            height: 200px;
+            margin-bottom: 20px;
+        }
+
+        .responsive-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-size: contain; /* 背景图像自适应容器大小 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .sticky-footer {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-attachment: fixed; /* 背景图像固定 */
+            background-position: bottom; /* 背景图像位于底部 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        /* 高级练习 */
+        .compact-background {
+            background: url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg') no-repeat center / cover navy;
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .parent {
+            background-color: lightgray; /* 父元素背景颜色 */
+            padding: 20px;
+        }
+
+        .child {
+            background-color: inherit; /* 子元素继承父元素的背景颜色 */
+            width: 100px;
+            height: 100px;
+        }
+
+        .layered-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'), url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 多重背景层 */
+            background-blend-mode: multiply; /* 背景图像混合 */
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .responsive-image {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-size: cover;
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        @media (max-width: 600px) {
+            .responsive-image {
+                background-image: url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 小屏幕下的背景图像 */
+            }
+        }
+
+        .before-element {
+            position: relative;
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .before-element::before {
+            content: "";
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            background-position: top center; /* 背景图像在顶部居中 */
+            background-size: 50px 50px;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 50px;
+            height: 50px;
+            transform: translateX(-50%);
+        }
+
+        .dynamic-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            width: 300px;
+            height: 150px;
+            margin-bottom: 20px;
+            animation: moveBackground 5s linear infinite; /* 背景移动动画 */
+        }
+
+        @keyframes moveBackground {
+            from { background-position: 0 0; }
+            to { background-position: 100% 0; }
+        }
+
+        .text-over-image {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            color: white;
+            text-shadow: 2px 2px 5px black; /* 文字阴影，确保文字在背景图上清晰可见 */
+            width: 300px;
+            height: 150px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .bordered-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            border: 5px solid #333; /* 边框 */
+            width: 300px;
+            height: 150px;
+            box-sizing: border-box; /* 确保背景图和边框对齐 */
+            margin-bottom: 20px;
+        }
+
+        .shape-background {
+            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
+            border-radius: 50%; /* 设置圆形背景 */
+            width: 150px;
+            height: 150px;
+            margin-bottom: 20px;
+        }
+
+        .hover-effect {
+            background-color: lightblue;
+            width: 300px;
+            height: 150px;
+            transition: background-color 0.3s; /* 背景颜色平滑过渡 */
+            margin-bottom: 20px;
+        }
+
+        .hover-effect:hover {
+            background-color: lightcoral; /* 鼠标悬停时改变背景颜色 */
+        }
+    </style>
+</head>
+<body>
+    <!-- 基础练习 -->
+    <div class="box"></div>
+    <div class="image-background"></div>
+    <div class="cover-image"></div>
+    <div class="header"></div>
+    <div class="pattern"></div>
+
+    <!-- 进阶练习 -->
+    <div class="multi-background"></div>
+    <div class="gradient-box"></div>
+    <div class="cropped-background"></div>
+    <div class="responsive-background"></div>
+    <div class="sticky-footer"></div>
+
+    <!-- 高级练习 -->
+    <div class="compact-background"></div>
+    <div class="parent">
+        <div class="child"></div>
+    </div>
+    <div class="layered-background"></div>
+    <div class="responsive-image"></div>
+    <div class="before-element"></div>
+    <div class="dynamic-background"></div>
+    <div class="text-over-image">文字在背景图片上显示</div>
+    <div class="bordered-background"></div>
+    <div class="shape-background"></div>
+    <div class="hover-effect"></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240/Source Code.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240/Source Code.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2c5ce36eaf89c50e23dc8ef9d671bc66a121d45d
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240/Source Code.html"	
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .div1 {
+            width: 600px;
+            height: 90px;
+            border: 1.8px solid black;
+            background-image: linear-gradient(45deg, yellow 0%, yellow 25%, blue 0%, blue 50%, red 0%, red 75%, green 0%, green 100%);
+        }
+
+        .div2 {
+            margin-top: 30px;
+            width: 600px;
+            height: 90px;
+            border: 1.8px solid black;
+            background-image: linear-gradient(to right, black 0%, black 25%, white 0%, white 50%, black 0%, black 75%, white 0%, white 100%);
+        }
+
+        .div3 {
+            width: 700px;
+            margin-top: 30px;
+            font-size: 100px;
+            font-weight: 700;
+            background-image: linear-gradient(45deg, orange 0%, orange 33%, blue 33%, blue 66%, red 66%, red 100%);
+            background-clip: text;
+            color: transparent;
+        }
+
+        .div4 {
+            width: 500px;
+            height: 500px;
+            background: white;
+            background-image: linear-gradient(to right, rgba(255, 92, 78, .8) 50%, transparent 0),
+                linear-gradient(rgba(255, 155, 138, .8) 50%, transparent 0);
+            background-size: 40px 40px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="div1"></div>
+    <div class="div2"></div>
+    <div class="div3">中华人民共和国</div>
+    <div class="div4"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240/\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240/\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..96700a6d7a17926e6060820348eaa9b8368a49d6
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240/\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240.md"
@@ -0,0 +1,87 @@
+### 线性渐变专项练习
+
+---
+
+#### 题目1: 彩色对角线渐变背景
+
+**样式代码：**
+
+```css
+.div1 {
+    width: 600px;
+    height: 90px;
+    border: 1.8px solid black;
+    background-image: linear-gradient(45deg, yellow 0%, yellow 25%, blue 0%, blue 50%, red 0%, red 75%, green 0%, green 100%);
+}
+```
+
+**效果图：**
+
+![彩色对角线渐变背景](https://img.haruka.net.cn/image/2024/10/09/xou1bo-0.png)
+
+---
+
+#### 题目2: 黑白条纹背景
+
+**样式代码：**
+
+```css
+.div2 {
+    margin-top: 30px;
+    width: 600px;
+    height: 90px;
+    border: 1.8px solid black;
+    background-image: linear-gradient(to right, black 0%, black 25%, white 0%, white 50%, black 0%, black 75%, white 0%, white 100%);
+}
+```
+
+**效果图：**
+
+![黑白条纹背景](https://img.haruka.net.cn/image/2024/10/09/xoyr27-0.png)
+
+---
+
+#### 题目3: 彩色文本渐变
+
+**样式代码：**
+
+```css
+.div3 {
+    width: 700px;
+    margin-top: 30px;
+    font-size: 100px;
+    font-weight: 700;
+    background-image: linear-gradient(45deg, orange 0%, orange 33%, blue 33%, blue 66%, red 66%, red 100%);
+    background-clip: text;
+    color: transparent;
+}
+```
+
+**效果图：**
+
+![彩色文本渐变](https://img.haruka.net.cn/image/2024/10/09/xp3350-0.png)
+
+---
+
+#### 题目4: 网格背景
+
+**样式代码：**
+
+```css
+.div4 {
+    width: 500px;
+    height: 500px;
+    background: white;
+    background-image: linear-gradient(to right, rgba(255, 92, 78, .8) 50%, transparent 0),
+                linear-gradient(rgba(255, 155, 138, .8) 50%, transparent 0);
+    background-size: 40px 40px;
+}
+```
+
+**效果图：**
+
+![网格背景](https://img.haruka.net.cn/image/2024/10/09/xpi0hk-0.png)
+
+### **总效果图：**
+
+![](https://img.haruka.net.cn/image/2024/10/09/xq99fz-0.png)