From 63dabae6c0a1bb3db57665527994b32e64289b6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=80=9D?= <1662679300@qq.com> Date: Tue, 1 Oct 2024 22:17:32 +0800 Subject: [PATCH] =?UTF-8?q?0930=E8=83=8C=E6=99=AF=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E7=AC=94=E8=AE=B0=E5=92=8C=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...47\345\222\214\344\275\234\344\270\232.md" | 159 ++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 "\346\235\216\346\200\235/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\345\222\214\344\275\234\344\270\232.md" diff --git "a/\346\235\216\346\200\235/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\345\222\214\344\275\234\344\270\232.md" "b/\346\235\216\346\200\235/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\345\222\214\344\275\234\344\270\232.md" new file mode 100644 index 0000000..85e6605 --- /dev/null +++ "b/\346\235\216\346\200\235/20240930-\350\203\214\346\231\257\345\261\236\346\200\247\345\222\214\344\275\234\344\270\232.md" @@ -0,0 +1,159 @@ + +### background 的常见背景属性 + + `background-color:#ff99ff;` 设置元素的背景颜色。 + + `background-image:url();` 将图像设置为背景。 + + `background-repeat: no-repeat;` + + 设置背景图片是否重复及如何重复，默认平铺满。 + + `no-repeat`不要平铺； + + `repeat-x`横向平铺； + + `repeat-y`纵向平铺。 + + +1. background-position: 描述左右的词 描述上下的词; 设置背景图片在当前容器中的位置。 + +属性值可以是正数，也可以是负数 + + + +2. background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。 + + 属性值可以是： + `scroll`（与fixed属性相反，默认属性）、 + `fixed`（背景就会被固定住，不会被滚动条滚走）。 + +另外还有一个综合属性叫做`background，它的作用是：将上面的多个属性写在一个声明中。 + +background属性和border一样，是一个综合属性，可以将多个属性写在一起。 + + + +**CSS3** 中，新增了一些background属性： + +1. background-size属性：设置背景图片的尺寸。 + + `cover`：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 + + `contain`：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白 + +``` +background-size: cover; +background-size: contain; +``` + + +2. background-origin 属性：控制背景从什么地方开始显示。 + +从padding-box 内边距开始显示背景图 + background-origin: padding-box; + +从border-box 边框开始显示背景图 + background-origin: border-box; + +从content-box 内容区域开始显示背景图 + background-origin: content-box; + + +3. background-clip属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面 +background-clip: content-box; 超出的部分，将裁剪掉。属性值可以是： + + border-box 超出 border-box 的部分，将裁剪掉 + + padding-box 超出 padding-box 的部分，将裁剪掉 + + content-box 超出 content-box 的部分，将裁剪掉 + + + ### 作业 + + 1. 请为一个名为.box的类设置背景颜色为深蓝色。 + +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-01%20220221.png) + +``` + + + +
+``` + 2. 给定一个名为.image-background的类，请设置其背景图片为url('background.jpg') + +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-01%20220230.png) + +``` + + + +
+``` + + 3.请为一个名为.cover-image的类设置背景图片，并确保图片覆盖整个元素 +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-01%20220246.png) +``` + + + +
+``` + 4. 请为一个名为.header的类设置背景图片，并将其定位到元素的右下角。 +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-01%20221016.png) +``` + + + +
+``` + + 5. 请为一个名为.pattern的类设置背景图片，并确保图片在垂直方向上重复。 +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-01%20220810.png) + ``` + .pattern{ + width: 100%; + height: 100vh; + background-image: url(https://c-ssl.duitang.com/uploads/item/202002/23/20200223132215_ViS3r.png); + background-repeat: repeat-y; + + } + + + +
+ ``` \ No newline at end of file -- Gitee