diff --git "a/\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md" "b/\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..50b83b7851871768c83bd1b9806d3712de76f4f0
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md"
@@ -0,0 +1,73 @@
+### 渐变
+#### 线性渐变
+
+```javascript
+// background-image:liner-gradient(方向(默认从上到下，可省略),起始颜色,终止颜色)
+background-image:liner-gradient(to right,red,green)
+```
+
+练习：
+
+效果图：
+
+代码展示：
+```javascript
+.d1{
+ background-image: linear-gradient(30deg,yellow 0%,yellow 25%,blue 25%,
+ blue 50%,red 50%,red 75%,green 75%,green 100%);
+ }
+```
+效果图：
+
+代码展示：
+```javascript
+.d2{
+ background-image: repeating-linear-gradient(to right,black 0px,black 150px,white 150px,white 300px);
+ }
+```
+
+效果图：
+
+代码展示：
+```javascript
+.d3{
+ text-align: center;
+ font-weight: bolder;
+ font-size: 50px;
+ background-image: linear-gradient(30deg,orange 0px,orange 130px,blue 130px,blue 200px,red 200px,red 600px);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+```
+
+
+#### 径向渐变
+
+```javascript
+// background-image: radial-gradient(辐射半径大小,中心位置,起始颜色,终止颜色)
+background-image: radial-gradient(100px at top,red,green)
+```
+
+#### 重复线性渐变
+
+```javascript
+// background-image: repeating-linear-gradient()
+background-image: repeating-linear-gradient(to left top, blue,red)
+```
+
+效果图：
+
+代码展示：
+```javascript
+.d4{
+ height: 400px;
+ background-image: repeating-linear-gradient(to right,rgb(255,150,138) 0px,rgb(255,150,138) 24px,white 24px,white 48px)
+ ,repeating-linear-gradient(to bottom,rgb(255,150,138) 0px,rgb(255,150,138) 24px,white 24px,white 48px);
+ background-blend-mode: multiply;
+ }
+```
+
+#### 重复径向渐变
+```javascript
+background-image: repeating-radial-gradient(extent-keyword, color-stop)
+```
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
index 2ee46748004b2cae76d6986365d0d30635d08951..07a9e997a619c0232498bb8eaa540a73dde4a509 100644
--- "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
@@ -58,6 +58,114 @@
float: left;
background: pink url(../img/img1.png) center 100% no-repeat;
}
+ .multi-background{
+ background-image: url(../img/img1.png),url(../img/monkey.png);
+ background-blend-mode:normal;
+ background-repeat: no-repeat;
+ width: 800px;
+ height: 400px;
+ border: 1px solid;
+ margin: 20px;
+ float: left;
+ }
+ .gradient-box{
+ background-image: linear-gradient(to right,blue,red);
+ width: 800px;
+ height: 40px;
+ margin: 20px;
+ float: left;
+ border: 1px solid;
+ }
+ .cropped-background{
+ width: 800px;
+ height: 600px;
+ background-image: url(../img/img1.png);
+ float: left;
+ margin: 20px;
+ border: 1px solid;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+ .responsive-background{
+ width: 800px;
+ height: 600px;
+ background-image: url(../img/img1.png);
+ float: left;
+ margin: 20px;
+ border: 1px solid;
+ background-repeat: no-repeat;
+ background-size: contain;
+ }
+ .sticky-footer{
+ width: 800px;
+ height: 600px;
+ background-image: url(../img/img1.png);
+ float: left;
+ margin: 20px;
+ border: 1px solid;
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-position: bottom;
+ }
+ .parent{
+ background-color: rgb(46, 84, 210);
+ width: 800px;
+ height: 600px;
+ float: left;
+ margin: 20px;
+ border: 1px solid;
+ }
+ .child{
+ background-color: inherit;
+ width: 400px;
+ height: 300px;
+ border: 1px solid;
+ }
+ .layered-background{
+ width: 800px;
+ height: 600px;
+ background-image: url(../img/img1.png),url(../img/monkey.png);
+ float: left;
+ margin: 20px;
+ border: 1px solid;
+ background-blend-mode: multiply;
+ background-repeat: no-repeat;
+ }
+ .responsive-image{
+ background-image: url(../img/img1.png);
+ background-size: cover;
+ width: 800px;
+ height: 600px;
+ margin-bottom: 20px;
+ float: left;
+ margin: 20px;
+ }
+ @media (max-width: 600px) {
+ .responsive-image {
+ background-image: url(../img/monkey.png); /* 小屏幕下的背景图像 */
+ }
+ }
+ .before-element {
+ position: relative;
+ width: 800px;
+ height: 600px;
+ margin: 20px;
+ float: left;
+ border: 1px solid;
+ }
+
+ .before-element::before {
+ content: "";
+ background-image: url(../img/img1.png);
+ background-position: top center; /* 背景图像在顶部居中 */
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 800px;
+ height: 600px;
+ transform: translateX(-50%);
+ background-repeat: no-repeat;
+ }
@@ -85,5 +193,44 @@
请为一个名为.compact-background的类使用简写形式设置背景属性，包括颜色、图片、位置和尺寸。 -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+