CSS背景
叠加背景图片:
background-image 可以为一个元素添加多个背景,第一幅图片最靠近观看者
#div {
background-image : url(a.gif), url(b.gif), url(c.gif);
}
多层叠加的背景还可以使用单独的背景属性,如下
#div {
background: url(cat.jpeg) top center no-repeat, url(back.webp) 100% 100%;
}
背景图片尺寸:
-
background-size : width height;
px, %, 或者关键字
contain(按图片尺寸小的边展开,可能有部分区域不会被覆盖),
cover(按图片尺寸大的部分展开,可能有部分图片展示不出来)
//全尺寸背景,匹配窗口缩放 background: url(a.jpg) no-repeat center fixed; background-size: cover;
-
background-repeat : repeat;复制 no-repeat; 不复制
-
background-origin:指定图像位置
div { /*接受三个值*/ background-origin : border-box; /*图片从边框左上角开始*/ background-origin : padding-box;/*默认:图片从内边缘左上角开始*/ background-origin : content-box;/*从内容左上角开始*/ }
-
background-clip:指定背景绘制区域
div { /*接受三个值*/ background-clip : border-box; /*默认:背景绘制到外部边缘*/ background-clip : padding-box;/*背景绘制到内边距边缘*/ background-clip : content-box;/*在内容框中绘制背景*/ }
文字设置背景:
div { background-image: url("back.webp"); background-clip : text; -webkit-background-clip : text; -webkit-text-fill-color : transparent; }