background-size

background-size

设置背景图片大小。图片可以保有其原有的尺寸、拉伸到新的尺寸，或者在保持原有比例的同时缩放到元素的可用空间的尺寸

div {

width: 300px;

height: 200px;

background: url("../assets/2.jpg")no - repeat;

border: 1px solid red;

/*background-size: 100%;*/ background - size: cover;

} /*若图片宽度250px，宽度为250px，让该图片完全铺满整个div区域，设置background-size*/

属性

100%：整个图片铺满div

cover：整个图片铺满div，缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 相反，cover 尽可能大地缩放背景图像并保持图像的宽高比例（图像不会被压扁）。背景图以它的全部宽或者高覆盖所在容器。

当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪

contain：不能铺满整个div，缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能地缩放背景并保持图像的宽高比例（图像不会被压缩）。背景图会填充所在容器。当背景图和容器的大小的不同时，容器的空

白区域（上/下或者左/右）显示由 background-color 设置的背景颜色

auto：不能铺满整个div，以背景图片比例缩放背景图片

z-index

取值

数字无单位

auto(默认)和其父元素一样的层叠等级整数

inherit继承

层叠上下文和层叠等级

对每一个网页来说，默认创建一个层叠上下文(可类比一张桌子)，这个桌子就是html元素，html元素的所有子元素都位于这个默认层叠上下文中的某个层叠等级(类似于桌子上放了一个盆儿，盆上放了一个果盘，果盘上放了一个水

杯……)

将元素的z-index属性设置为非auto时，会创建一个新的层叠上下文，它及其包含的层叠等级独立于其他层叠上下文和层叠等级(类似于搬了一张新桌子过来，和旧桌子完全独立)

层叠顺序