CSS漂亮盒子（上）
HTML文档中的所有元素都是由矩形盒子构成的——不管是包含页面结构的容器元素，还是段落中的每行文本，归根结底都是盒子。
1.背景颜色
设置页面背景颜色。
body {
background-color: #bada55;
}
简写属性：
body {
background: #bada55; /* 这里会把其他属性重置为默认值 */
}
通过background可以一次性地设置与背景相关的多个属性。
十六进制表示法：
一个#后面加上6位十六进制数字构成的字符串。
这个字符串由3组数字（每组各2位）构成，每个数字的取值范围是0F。十六进制的意思就是每个数字都可能有16种不同的值，因此除了09这10个数，还要用AF补足第1116位数。
3组数字分别表示颜色中的红、绿、蓝（RGB）通道的值。每种颜色通道的值有256种可能，也就是2位十六进制数所能表示的可能性（16×16=256）。
如果3组数字中每组的2位数字相同，可以简写成3位数字。
颜色值也可以用预定义的关键字表示（比如red、green、blue等等）。
rgb()函数式表示法：
RGB的每个值可以是一个十进制数值，取值范围为0255，也可以是一个百分比值，取值范围为0%100%。
body {
background-color: rgb(186, 218, 85);
}
hsl()函数式表示法：
色相-饱和度-亮度（hue-saturation-lightness），即HSL模型。
body {
background-color: hsl(74, 64%, 59%);
}
注意，使用哪种表示法来表示颜色没有本质区别，它们只是表示同一事物的不同方法而已。
rgba()函数式表示法：
末尾的a表示alpha，是用于控制透明度的阿尔法通道。
body {
/* 第四个参数表示透明度，取值范围为0~1.0，1.0表示完全不透明，0表示完全透明。 */
background-color: rgba(186, 218, 85, 0.5);
}
CSS提供另一种方式来控制透明度。
.box {
background-color: #bada55;
opacity: 0.5;
}
使用opacity让整个元素都变透明了，包括元素中包含的内容。
使用opacity把一个元素设置为透明后，将无法再让其子元素变得不那么透明。
2.背景图片
<header class="profile-box">
</header>
.profile-box {
width: 100%;
height: 600px;
background-color: #8Da9cf;
background-image: url(img/big-cat.jpg); /* 设置背景图片 */
}
background-repeat的默认值（repeat）决定了图片会平铺到整个元素盒子，即背景图片要沿x轴和y轴重复。
.profile-box {
background-image: url(img/big-cat.jpg); /* 设置背景图片 */
background-repeat: no-repeat; /* 禁止重复 */
/* 支持以空格分隔的针对两个方向的关键字声明语法 */
/* background-repeat: repeat no-repeat; */
}
使用url()函数加载图片可以使用相对路径，也可以使用绝对路径，还可以使用图片的base64编码数据。
background-image: url(img/big-cat.jpg);
图片格式：
- JPEG（有损压缩，适合照片）
- PNG（无损压缩，适合图标等小尺寸文件）
- GIF（动图）
- SVG（矢量图）
- WebP（Google开发的一种新图片格式）
位图意味着文件会包含每个像素的数据，拥有内在的维度（宽度和高度）。
SVG图形包含的是如何在屏幕上绘制图形的指令，它可以任意缩放，也可以在任意像素密度的屏幕上清晰呈现。
3.背景图片语法
3.1 背景位置
背景图片的位置由background-position属性控制。
background-position属性既可以使用关键字，也可以使用像素、em或百分比。最简单的情况下，可以只给两个值：一个表示相对于左侧的偏移量，一个表示相对于顶部的偏移量。
.profile-box {
/* 省略 */
background-position: 50% 50%;
}
如果使用像素或em单位来设置背景图片的位置，那么图片的左上角会相对于元素的左上角定位，也就是会偏移指定的数值。如果设置背景图片的位置时使用了百分比，定位的是图片中对应的点。如果水平或垂直方向都设置为20%，那么你定位的实际上是距图片左边和上边各20%的点，而这个点会与距离父元素左边和上边各20%的点重合。
使用关键字来对齐背景图片，要在x轴上用left、center或right，在y轴上用top、center或bottom。顺序一般都是先x轴后y轴。
.profile-box {
/* 省略 */
background-position: left top;
}
在只使用两个关键字的情况下，规范并没有限定顺序（如可以使用top left）。
新语法允许给background-position添加外边空声明，先写边界关键字，再写长度值。
<p>
<a href="/activate" class="link-with-icon">Activate flux capacitor</a>
</p>
.link-with-icon {
padding-right: 2em;
background-image: url(img/icon.png);
background-repeat: no-repeat;
background-position: right 1em top 50%;
}
使用calc()函数可以让浏览器替你计算任何数值（角度、像素、百分比，等等），甚至还支持动态计算的混合单位。
.link-with-icon {
/* 省略 */
background-position: calc(100% - 1em) 50%;
}
3.2 背景裁剪与原点
默认情况下，背景图片是绘制在元素边框以内的。如果把背景图片定位到边框下方，而边框又被设值为半透明，那么图片边缘就会出现半透明的边框。使用background-clip属性可以改变这个行为。
background-clip属性的默认值为border-box。
.profile-box {
border: 10px solid rgba(220, 220, 160, 0.5);
padding: 10px;
background-image: url(img/cat.jpg);
background-clip: padding-box;
}
使用background-origin属性控制背景定位默认的原点的位置。
3.3 背景附着
背景会附着在指定元素的后面，如果你滚动页面，那么背景也会随着元素移动而移动。可以通过background-attachment属性改变这种行为。
.profile-box {
background-attachment: fixed;
}
3.4 背景大小
使用background-size属性可以设置图片大小，也可以让它随元素大小缩放而缩放（不管页面如何缩放，都让内容保持自己的宽高比）。要让图片随元素缩放而缩放，则必须使用百分比值。不过要注意，百分比值并不是相对于图片固有大小，而是相对于容器大小。
.profile-box {
/* 让图片宽度保持为100%，同时保持自己固有的宽高比。*/
background-size: 100% auto;
}
使用关键字contain让浏览器尽可能保持图片最大化，同时不改变图片的宽高比，避免图片被裁切。
.profile-box {
background-size: contain;
}
3.5 背景属性简写
使用background这个简写属性要注意，它会把所有没有明确指出的属性都重置为其默认值。一般而言，明确的代码更不容易出错，而且也更容易让人理解。
.profile-box {
background: url(img/cat.jpg) 50% 50% / cover no-repeat padding-box content-box #bada55;
}
参考资料：
