diff --git "a/\350\202\226\347\277\224/\344\275\234\344\270\232/\346\273\232\345\212\250.html" "b/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0923-\346\273\232\345\212\250.html" similarity index 100% rename from "\350\202\226\347\277\224/\344\275\234\344\270\232/\346\273\232\345\212\250.html" rename to "\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0923-\346\273\232\345\212\250.html" diff --git "a/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.html" "b/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.html" new file mode 100644 index 0000000000000000000000000000000000000000..1c54365baf721d0ff787f528333674f6be2d7d55 --- /dev/null +++ "b/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.html" @@ -0,0 +1,69 @@ + + + + + Document + + + + +
+ 请为一个名为.box的类设置背景颜色为深蓝色。 +
+
+ 给定一个名为.image-background的类，请设置其背景图片 +
+
+ 请为一个名为.cover-image的类设置背景图片，并确保图片覆盖整个元素。 +
+
+ 请为一个名为.header的类设置背景图片，并将其定位到元素的右下角。 +
+
+ 请为一个名为.pattern的类设置背景图片，并确保图片在垂直方向上重复。 +
+ + + + \ No newline at end of file diff --git "a/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-1.png" "b/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..ed834b870881eaf78c40cfb05d941cd8e6f77436 Binary files /dev/null and "b/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-1.png" differ diff --git "a/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-2.png" "b/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-2.png" new file mode 100644 index 0000000000000000000000000000000000000000..feb0d08e35bb6cd94de0f227f034c0f934693aca Binary files /dev/null and "b/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-2.png" differ diff --git "a/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-3.png" "b/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-3.png" new file mode 100644 index 0000000000000000000000000000000000000000..395a6d72ac648b394cf05862ffc8a1fe46ec7c70 Binary files /dev/null and "b/\350\202\226\347\277\224/\347\205\247\351\252\227/0930-3.png" differ diff --git "a/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\346\225\210\346\236\234.png" "b/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\346\225\210\346\236\234.png" new file mode 100644 index 0000000000000000000000000000000000000000..9403eea7258640f175e6de56890fcd26f0dd3915 Binary files /dev/null and "b/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\346\225\210\346\236\234.png" differ diff --git "a/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..678a68e5a2f5041153ea72d9b7ad4b4df63ffe9b --- /dev/null +++ "b/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.md" @@ -0,0 +1,123 @@ +# 背景属性 +## background 的常见背景属性： ++ `bgckground-color:#ff99ff`设置背景颜色 ++ `background-image:url(图像地址)`将图像设置为背景 ++ `background-repeat: ;` 设置背景图片是否重复 + + `no-repeat`不要平铺； + + `repeat-x`横向平铺； + + `repeat-y`纵向平铺。 ++ `background-position:位置;` 设置背景图片在当前容器中的位置。 + + 格式：background-position:向右偏移量（属性值可为正也可为负）向下偏移量（同理） ++ `background-attachment:属性值;` 设置背景图片是否跟着滚动条一起移动。 +属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。 ++ `background-size`属性：设置背景图片的尺寸。 + + 格式举例： + +```javascript + /* 宽、高的具体数值 */ + background-size: 500px 500px; + + /* 宽高的百分比（相对于容器的大小） */ + background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%; + + background-size: 100% auto; //这个属性可以自己试验一下。 + + /* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */ + background-size: cover; + + /* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */ + background-size: contain; +``` + + `cover` 和 `contain` 区别： + +- `cover`：图片始终**填充满**容器，且保证**长宽比不变**。图片如果有超出部分，则超出部分会被隐藏。 + +- `contain`：将图片**完整地**显示在容器中，且保证**长宽比不变**。可能会导致容器的部分区域留白。 + + +### 拓展 +背景颜色的另外一种表达方式： ++ HSLA 表示法： + + 举例： + +```javascript + background-color: hsla(240,50%,50%,0.4); +``` + +解释： + +- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 + +- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。 + +- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。 + +- `A` 透明度，取值范围 0~1。 +## 背景属性效果及主要代码 +![background](../照骗/背景效果.png) +``` +html + + .box + { + width: 200px; + height: 200px; + background-color:blue ; + + } + .image-background + { + width: 200px; + height: 200px; + background-image: url(../照骗/0930-1.png); + } + .cover-image + { + background-image: url(../照骗/0930-3.png); + background-size: cover; + width: 200px; + height: 200px; + } + + .header + { + background-image: url(../照骗/0930-1.png); + height: 100px; + width: 200px; + background-repeat: no-repeat; + background-position: right bottom; + border: 1px solid gray; + + + } + .pattern + { + width: 100%; /* 设置元素的宽度 */ + height: 300px; /* 设置元素的高度 */ + background-image: url(../照骗/0930-3.png); /* 设置背景图片 */ + background-repeat: repeat-y; /* 在垂直方向上重复图片 */ + + } + + + + +
+ 请为一个名为.box的类设置背景颜色为深蓝色。 +
+
+ 给定一个名为.image-background的类，请设置其背景图片 +
+
+ 请为一个名为.cover-image的类设置背景图片，并确保图片覆盖整个元素。 +
+
+ 请为一个名为.header的类设置背景图片，并将其定位到元素的右下角。 +
+
+ 请为一个名为.pattern的类设置背景图片，并确保图片在垂直方向上重复。 +
+``` +