@Advanced Background

背景图片 background-image[NOT背景颜色 background-color]使用/渲染时的起点位置/原点位置

background-origin: padding-box | border-box | content-box;

. padding-box：默认值；背景图片从 padding 区开始渲染，border 区不会出现；如果有背景色，则默认会在 border 区出现

. border-box：背景图片从 border 区开始渲染；可创建透明边框效果

. content-box：背景图片只会出现在内容区域，padding 和 border 都不会出现

[] background-origin 示例

.bg-origin {
    width: 320px;
    height: 180px;
    border: 20px dashed rgba(255, 255, 255, 0.8);
    padding: 20px;
    background-image: linear-gradient(45deg, #ff0, #f00);
    background-size: cover;
    background-origin: padding-box border-box content-box;
    margin: 1rem auto;
}

背景裁剪 Background-clip

背景[背景颜色和背景图片]的延申什么位置 - extends underneath

background-clip: border-box | padding-box | content-box | text;

1. border-box

背景延伸至边框外沿（但是在边框下层）；默认属性

背景显示拓展到border区域下面；超出border区的背景将被裁剪掉

如果有border，则border会覆盖背景；换句话说，背景填充到border区，只不过被border覆盖住了

设置一个dashed的border就可看到背景是在border的下方

2. padding-box

背景延伸至内边距（padding）外沿。不会绘制到边框处

背景显示拓展到padding区域；超过padding区的背景将被裁剪掉

3. content-box

背景被裁剪至内容区（content box）外沿

背景显示在content区域下面；超过context区的背景将被裁剪掉

如果有padding，但是只指定了background-image而没有指定background-color，则padding区为默认的白色

所以保险起见，通常要设置一个背景色，避免background-image无效

4. text

背景被裁剪成文字的前景色

文字颜色设置为透明色，创建带背景的文字效果

尽量不要使用文字阴影 text-shadow，而应该使用滤镜 filter 的投影 drop-shadow() 添加层次效果

[] background-clip 示例

.bg-clip {
    width: 320px;
    height: 180px;
    line-height: 100px;
    font-size: 40px;
    font-weight: 600;
    border: 20px dashed rgba(255, 255, 255, 0.8);
    padding: 20px;
    background-color: #ff0;
    background-image: linear-gradient(45deg, #ff0, #f00);
    background-size: cover;
    background-clip: border-box padding-box content-box text;
    margin: 1rem auto;
}

hello, world.

背景铺贴 Background-attachment

. 背景图片是固定在视口viewpoint还是随窗口容器滚动；即背景图片和元素的附着方式

. 多用于营造视觉差效果

background-attachment: scroll | fixed | local;

. scroll：默认背景图片会随着窗口/页面滚动而滚动；背景图片和自己保持固定；自己滚动不影响，别人滚动会影响

. fixed：背景图片不会随着窗口/页面滚动而滚动背景，即：背景图片固定不动/相对于视口固定

. local：背景图片会随着元素内容的滚动而滚动

[] 默认情况

. 背景图片不跟随内容滚动；但跟随窗口/视口滚动：整体滚动

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis at nostrum fugiat ratione reprehenderit eius officia, tempore voluptatum incidunt nihil, iusto laborum? Cupiditate autem ipsam illum totam excepturi aliquam sit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, doloribus libero at nihil temporibus ipsa quisquam, nulla sapiente voluptates fuga, porro sequi unde labore explicabo. Unde dolore omnis distinctio molestias?

.bg-attach-default {
    overflow-y: auto;
    background-image: url(../imgs/bg.jpg);
}

[] 固定

. 背景图片不跟随内容滚动，但是相对窗口/视口固定

. 参考页面顶部

.bg-attach-local {
    overflow-y: auto;
    background-image: url(../imgs/bg.jpg);
    background-attachment: local;
}

[] 本地

. 背景图片跟随内容滚动；跟随窗口/视口滚动

. 背景图片通常需要重复

.bg-attach-local {
    overflow-y: auto;
    background-image: url(../imgs/bg.jpg);
    background-attachment: local;
}

总结与作业 Summary & Homework

总结: . background-origin; . background-clip; . background-attachment
作业: . 综合使用背景属性完善个人网站，如网站背景滚动、头像边框