@Advanced Background

Origin
Clip
Attachment

背景起点 Background-origin

说明

. 背景图片[NOT背景颜色]使用/渲染时的起点位置

. 用来控制background-position位置的属性

[提示]盒模型包括：边框区border、填充区padding和内容区content

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

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

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

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

[] background-origin

background-origin:

padding-box border-box content-box

background-size:

不使用 contain cover 100% 100%

.bg-origin {
    border: 20px solid rgba(0, 0, 0, 0.2);
    padding: 20px;
    background-color: #ff0;
    background-image: url(../imgs/bg.jpg);
    background-repeat: no-repeat;
}

背景裁剪 Background-clip

说明

. 背景[背景颜色和背景图片]的裁剪区域

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

. border-box：背景从border区域向外裁剪，即超出border区的背景将被裁剪掉；如果有border，则border会覆盖背景；换句话说，背景填充到border区，只不过被border覆盖住了；设置一个dashed的border就可看到背景是在border的下方

. padding-box：背景从padding区域向外裁剪，超过padding区的背景将被裁剪掉

. content-box：背景从content区域向外裁剪，超过context区的背景将被裁剪掉；如果有padding，但是只指定了background-image而没有指定background-color，则padding区为默认的白色；所以保险起见，通常要设置一个背景色，避免background-image无效

[] background-clip

. 设置了背景颜色和背景图片；其它样式不做设置

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

背景铺贴 Background-attachment

说明

. 背景图片显示方式/是否随窗口滚动

. 背景图片和内容的附着方式

. 多用于营造视觉差效果，更多实例，请访问简历一节

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
作业: . 综合使用背景属性完善个人网站，如网站背景滚动、头像边框