note

Appearance

背景 ​

background-color ​

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color

css
/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* RGB value */
background-color: rgb(255, 255, 128);

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentColor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

该属性只能使用 color，

inherit 表示继承父类，但是存在兼容性问题，最好别用

background-position ​

background-repeat ​

background-attachment ​

background-image ​

background-origin 背景图片起始位置 ​

css3

警告

如果背景不是 no-repeat，这个属性无效，它会从边框开始显示

background-origin 为 background-image 设置位置。

当使用 background-attachment 为 fixed 时，该属性将被忽略。

css
background-origin ： border-box | padding-box | content-box;

padding

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

border-box : 边框 开始显示。
padding-box : 内边距 开始显示（默认值）。
content-box : 内容区域 开始显示。

css
.background-origin-demo {
  background: #ccc url(https://cn.vuejs.org/images/logo.png);
  background-origin: padding-box;
}

background-clip / 裁剪 ​

css3

todos

背景图片 做 裁剪，适应实际需要。

css
background-clip ： border-box | padding-box | content-box | no-clip
天街小雨润如酥

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

no-clip ： 不裁剪
border-box ： 和 不裁剪一个效果
padding-box ： 剪掉 边框，从 padding 开始保留
content-box ： 剪掉 内容（内填充） 意外的内容

background-size ​

css3