颜色、背景和渐变

[xiongshj]

颜色、背景和渐变

这是学习《CSS 权威指南》第 9 章的笔记。

颜色

CSS 可以为任何元素设置前景色和背景色。

一般来说，前景指元素的文本，不过也包括元素四周的边框。

设置元素前景色最简单的方法是使用 color 属性，这个属性会被继承。

元素的 currentColor 值始终为 color 属性的计算值。

一般建议同时设定前景色和背景色。

背景

默认情况下，背景区域从前景背后的空间一直延伸到边框的外边界。因此，内容框和内边距都在元素的背景中，而边框在背景之上绘制（可以使用 CSS 改变这种行为）。

通过 CSS 可以把元素的背景设为纯色，也可以设为一个或多个图像，甚至还可以设为线性渐变或径向渐变。

背景色

元素背景的颜色使用 background-color 属性声明，值为任何有效的颜色值。

background-color 属性的值不继承。这个属性的默认值为 transparent。

裁剪背景

有个 CSS 属性能控制背景延伸到何处，这个属性名为 background-clip，取值有 border-box | padding-box content-box | text。

• 默认值（border-box）是以前一直采用的行为，即背景绘制区域延伸到边框的外边界。背景始终绘制到边框的可见部分背后。
• 如果设为 padding-box，背景只延伸到内边距区域的外边界（即边框的内边界）。因此，边框背后不绘制背景。
• content-box 值把背景限制在元素的内容区内。
• text 把背景裁剪到元素的文本线条。意即，文本将使用背景“填充”，文本线条之外的背景是透明的。不过要注意，若想看到效果，要删除元素的前景色。否则，前景色将遮盖背景。

background-clip 对根元素没有效果，这和根元素背景的绘制方式有关。

背景绘制区域由 background-clip 裁剪后，如果有圆角，再由圆角进一步裁剪。

截至 2017 年年末，只有 Firefox 支持 background-clip: text 这种确切形式。不过，几乎每个浏览器，包括 Firefox，都支持 -webkit-background-clip: text。

背景图

首先，要使用 background-image 属性把图像放到背景中。

与 background-color 一样，background-image 也不继承。其实，背景相关的属性都不继承。

使用背景图时最好同时指定背景色，这样至少能保证文本是可见的。

p.starry {
  background-image: url("http://www.site.web/pix/stars.gif");
  background-color: black;
  color: white;
}

背景定位

在元素的背景中放好图像之后，能不能指定图像的具体位置呢？当然没问题，使用 background-position 属性。

background-position 十分简单，这个属性的值有很多种指定方式。首先是关键字：top、bottom、left、right 和 center。通常，关键字成对出现，但也不尽然。其次是长度值，例如 50px 或 2cm。最后是百分数值，例如 43%。这几种值对背景图位置的影响稍有不同。

位置关键字的顺序随意，只要不超过两个：一个指定横向位置；一个指定纵向位置。如果使用两个横向位置关键字（right right）或两个纵向位置关键字（top top），整个值将被忽略。

如果只有一个关键字，另一个假定为 center。因此，如果想把背景图放在各个段落的上部居中位置，只需这样声明：

p {
  background-image: url("yinyang-sm.png");
  background-repeat: no-repeat;
  background-position: top;
}

如果只提供一个百分数值，那个值将做横向偏移，而纵向偏移假定为 50%。

background-position 的默认值是 0% 0%，其作用与 top left 一样。正是因为这样，在没有指定其他位置时，背景图始终从元素背景的左上角开始平铺。

关键字和长度值及百分数值可以混用。

关键字以外的值对轴的顺序有要求。也就是说，如果使用长度值或百分数，横向值必须写在首位，纵向值必须写在末位。

默认的，偏移始终相对背景区域的左上角。不过可以使用关键字实现特殊的功能：指定相对哪边计算偏移。

p {
  background-position: 33% 30px;
  background-position: left 33% top 30px;
  background-position: right 33% bottom 30px;
}

改变偏移边，基本的句法是：一个边界关键字、一个偏移距离、一个边界关键字和一个偏移距离。横向和纵向的顺序随意。如果某一个方向的偏移量为零，可以将其省略。

p {
  background-position: bottom 30px right 25%;
  background-position: right 25% bottom 30px;
  background-position: right bottom 30%;
  background-position: right 25% bottom;
}

改变定位框

background-origin 属性确定计算源图像的位置时以什么的边界为基准，定义的是 背景定位区域 （background-clip 定义的是 背景绘制区域 ），取值有 border-box | padding-box（默认值） | content-box。

背景重复方式（或不重复）

background-repeat 属性，取值有 repeat | no-repeat | space | round | repeat-x | repeat-y。

如果提供两个值，第一个值应用于横向，第二个值应用于纵向。如果只有一个值，同时应用于横向和纵向，repeat-x 和 repeat-y 例外。

repeat 关键字的效果是沿所有方向无限平铺图像。repeat-x 和 repeat-y 分别在横向和纵向上重复图像，而 no-repeat 则禁止图像沿指定的轴平铺。

space 确定沿某一轴能完全重复多少次，然后从背景区域的一边倒对边均匀排列图像。如果图像太大，在某个方向放不下，那就只出现一次，位置则由 background-position 的值确定。反过来，如果在某个方向上要重复多次，那个方向上的 background-position 值将被忽略。

相比之下，round 值在重复背景图的过程中很有可能会缩放图像，而且（奇怪的是）不覆盖 background-position 的值。如果从背景区域的一边到对边之间无法重复整数次，那么图像将被放大或缩小，恰好重复整数次。此外，图像沿各轴的缩放程度可以不同。

使用 round 时，如果不想让平铺的图像被裁剪，必须从四个角中的某一个开始平铺（而且要保证背景定位区域和背景绘制区域是相同的）。

background-clip 能改变背景的绘制区域，而 background-origin 确定源图像的位置。这两个值不同的话，使用 space 和 round 时会出现部分裁剪情况。这是因为 space 和 round 是相对背景定位区域计算的，而不是背景绘制区域。可以选择把这两个值设为一样的。

背景粘附

background-attachment 属性，取值有 fixed | local | scroll。

• fixed 把源图像声明为固定在视区内，从而免受滚动的影响。
• 与 fixed 的作用基本相反的是 local，即背景图随内容一起滚动。
• 默认值 scroll，设为这个值时，在 Web 浏览器滚动文档时，背景图随之一起滚动。（这个有些不一样，用到的时候多查查文档看看）

控制背景图的尺寸

background-size 属性用来改变背景图片尺寸。

为 background-size 提供两个值时，第一个值是横向尺寸，第二个值是纵向尺寸。

声明的百分数值相对背景定位区域计算，即由 background-origin 定义的区域。

假如想让图像完全覆盖元素的背景，而且不在乎有部分图像超出背景绘制区域。此时，可以使用 cover。与之相比，contain 会将图像缩放为正好放在背景定位区域中的尺寸，允许有部分区域不被图像覆盖。

写为一个属性

背景相关的属性可以集中在一起，使用一个简写属性声明：background。

background-size 值要紧跟在 background-position 值后面，而且二者之间要以一条斜线（/）隔开。

如果同时为 background-origin 和 background-clip 提供值，前一个分配给前者，后一个分配给后者。如果只提供一个值，同时为这两个属性设定为这个值。

background 不要求必须设定任何值，只要有一个值，其他都可以省略。使用简写属性可以只设定背景颜色，而且这是很常见的做法：

body {
  background: white;
}

渐变

有两种新的图像类型完全由 CSS 实现：线性渐变和径向渐变。这两种渐变又各分为二：循环渐变和不循环渐变。

渐变指从一个颜色到另一个颜色的平滑过渡。

渐变的平缓或骤变程度取决于渐变的作用空间。

在探讨渐变的过程中请谨记一点：渐变是图像。尽管渐变是通过 CSS 实现的，但每一点都与 SVG、PNG、GIF 等图像一样。

线性渐变

线性渐变指沿线行向量填充得到的渐变。这个向量称为梯度线。梯度线始终经过渐变图像的中心点。

#ex01 {
  background-image: linear-gradient(purple, gold);
}

#ex02 {
  background-image: linear-gradient(90deg, purple, gold);
}

#ex03 {
  background-image: linear-gradient(to left, purple, gold);
}

渐变的默认方向是 to bottom，这与 180deg 和其他等量值（例如 0.5turn）的作用是一样的。

基本的格式：开头是一个可选的方向，然后列出一系列色标和（或）中色点，结尾又是一个色标。

在每个颜色值之后可以（但不强求）提供一个位置值。

色标位置的长度值不限于像素值，任何长度值都可以，em、英寸等都能用。此外，在同一个渐变中甚至可以混用不同的单位，但是一般不推荐这么做。

百分数值相对梯度线的总长度计算。位于 50% 处的色标在梯度线的中点。

如果把两个色标放在同一个点上，会由前一种颜色直接变成后一种颜色，跨度为零。这种“急变”效果可用于实现条纹：

.stripes {
  background-image: linear-gradient(90deg,
  gray 0%, gray 25%,
  transparent 25%, transparent 50%,
  gray 50%, gray 75%,
  transparent 75%, transparent 100);
}

设置中色点

#ex01 {
  background-image: linear-gradient(to right, #000 25%, rgb(90%, 90%, 90%) 75%);
}

#ex02 {
  background-image: linear-gradient(to right, #000 25%, 33%, rgb(90%, 90%, 90%) 75%);
}

#ex03 {
  background-image: linear-gradient(to right, #000 25%, 67%, rgb(90%, 90%, 90%) 75%);
}

径向渐变

径向渐变的句法与线性渐变类似，不过也有一些区别：简单来说，可以声明形状和尺寸（可选），可以声明渐变的中心点在何处（可选），然后声明两个或多个色标，色标之间还可以指定中色点（可选）。

径向渐变只有两种可用的形状值（因此也就只能有两种形状），即 circle(圆形) 和 ellipse(椭圆形)。径向渐变的形状可以显式声明，也可以由渐变图像的尺寸推导出来。

指定径向渐变的尺寸时可以只提供一个非负长度值（得到的是圆形），也可以提供两个非负长度值（得到的是椭圆形）。

尺寸也可以使用百分数值，不过只能用于设定椭圆形。圆形不能用百分数指定尺寸，因为无法确定百分数相对哪一轴计算。

当然，长度值和百分数值不是设定径向渐变尺寸的唯一方式。除此之外，还可以使用四个关键字：closest-side、farthest-side、closest-corner 和 farthest-corner（默认值）。

径向渐变的中心默认放在 center，也可以使用对 background-position 属性来说任何有效的位置值。

#ex01 {
  background-image: radial-gradient(30px at bottom left, purple, gold);
}

#ex02 {
  background-image: radial-gradient(30px 15px at center right, purple, gold);
}

#ex03 {
  background-image: radial-gradient(50% 15% at 30px 30px, purple, gold);
}

#ex04 {
  background-image: radial-gradient(farthest-side at 25% 66%, purple, gold);
}

#ex05 {
  background-image: radial-gradient(farthest-corner at 30px 66%, purple, gold);
}

处理渐变图像

使用渐变有三点优势：

• 基本可以肯定的是，CSS 所占的字节比 PNG 图像小。
• 更为重要的是，PNG 图像要额外请求服务器。这会拖慢页面的加载时间，降低服务器的性能。CSS 渐变就在样式表中，无需额外请求服务器。
• 修改渐变简单得多，因此你可以不断试验，直到找出合适的尺寸、形状和明暗程度。

循环渐变

循环渐变，repeating-linear-gradient 或 repeating-radial-gradient。

盒子投影

为元素所在的框体创建投影，即 box-shadow。

投影只在元素边框的外边界以外才看得到。

定义盒子投影设定的长度值，第一个定义横向偏移，第二个定义纵向偏移。如果提供第三个值，定义的是模糊距离，即指定给模糊留出多少空间。第四个值定义展开距离，这会改变投影的尺寸。正值在模糊之前延伸投影，负值使投影变小。

还有一点，即 inset 关键字。如果在 box-shadow 属性的值中加上 inset，投影在框体内部渲染，（从视觉上来讲）不再浮动在画布上，而像是向内凹陷的。

注意，inset 关键字可以在其他值前面，也可以在后面，但不能在长度和颜色之间。

最后，与文本投影一样，一个元素可以应用任意多个盒子投影，各投影之间以逗号分隔。而且，部分投影可以是内凹的，部分可以是外凸的。例如：

#shadowbox {
  background: #eee;
  box-shadow: inset 1ch 1ch 0.25ch rgba(0, 0, 0, 0.25), 1.5ch 1.5ch 0.4ch rgba(0, 0, 0, 0.33); 
}

#wacky {
  box-shadow: inset 10px 2vh 0.77em 1ch red,
  1cm 1in 0 -1px cyan inset,
  2ch 3ch 0.5ch hsla(117, 100%, 50%, 0.343),
  -2ch -3ch 0.5ch hsla(297, 100%, 50%, 0.23);
}

小结

可能否。