css如何设置background？

本文尽量避免涉及css语法，从问题入手解读背景设置。

用什么做背景？

设置color和image

1. 可以设置纯色，也可以设置渐变色。
2. 先设置的背景图片处于z-index的正向上方（靠近用户）。
3. 贪心可以原谅，两者可以同时拥有。

背景区域有多大？

设置clip,对图片和颜色都有效。

1. 和边框一般大：border-box（默认值）
2. 和内填充一般大：padding-box
3. 和内容一般大：content-box
4. 和内容中文字一般大：text

文字镂空效果：

background-clip: text;
-webkit-background-clip: text;
color: transparent;

demo

背景图片如何缩放？

设置size。

1. 等比例缩放，用背景图片的内容覆盖整个背景区域：cover（比例不失真，但可能显示不全）
2. 在背景区域内完整显示背景图片：contain
3. 水平和垂直方向缩放：
   数值：对应方向缩放到数值的尺寸
   百分比：相对背景区域的缩放百分比
   auto：跟随另外一边等比例缩放。

说明：

• 任意一个方向采用auto，图片比例不会失真。
• auto 等价于 auto auto，表示采用背景图片的原始尺寸，这也是默认值。

demo

背景图片是否重复？

设置repeat。
水平垂直两个方向上设置：

1. 重复，裁切最后一个超出的图片：repeat。
2. 不重复：no-repeat。
3. 重复，不裁切不缩放，必要时填充空白：space。
4. 重复，不裁切但会缩放：round。

说明：

• 在背景图片非常大时，设置space，背景图片也会被裁切。

demo

背景图片对齐哪个边框？

设置origin。

1. 对齐边框：border-box（默认值）
2. 对齐内填充：padding-box
3. 对齐内容：content-box

demo

背景图片如何对齐？

设置position，控制相对于对齐边框的偏移。

可以设置水平和垂直方向上偏移的数值、百分比或者位置。

具体有以下三种途径：

1. 两个百分比在背景图片（缩放后的）和背景边框上能够分别确定两个点，按照这两个点对齐：percent% percent%
2. 以背景图片和背景边框左上角相对位置对齐：数字（单位） 数字（单位）
3. 以上下左右四条边+经过中线点于边垂直的两条直线对齐：一对儿方位词汇组合

说明：

• 1和3是一种对齐方式，3是1的一种特例。
• 1中左侧、上方是0%，向右、向下数值增加。例：50% 50% ，就是以背景图片和背景内容边框的中线点重叠对齐，50%是水平和垂直居中的两条线，他们的交叉点是中心点。
• 2中左上角为：0 0，向右、向下数值增加。例：10px 10px，背景图片左上角相对边框左上角水平垂直方向上都偏移10px。
• 3中左侧边线：left；右侧边线：right；垂直通过中心点的线：center；上方边线：top；下方边线：bottom；水平通过中线点的线：center。例：right bottom，就是两者右侧和下方的边线贴合对齐，也就是两者的右下角对齐。
• 只写一个数字或者百分比，则两个方向都用这个值。例如：50% 等价于 50% 50%。

demo

背景图片固定在哪？

设置attachment。

1. 固定在容器的边框上：scroll（默认值）
2. 固定在网页上：fixed
3. 固定在内容上：local

说明：

• 固定在内容上，边框下的背景会自动不显示。

demo