CSS知识点梳理(9)-颜色、背景色、渐变

技术总结 评论

颜色 (Colors)

  • 使用color属性设置的是元素的前景色，通常指文本的颜色
  • color属性也影响元素的边框颜色，如果没有border-color属性，边框颜色默认前景色，也就是color属性的值.如下所示，元素<p class="aside">灰色文本，灰色的中等宽度的实线的边框。
    1
    2
    3
    4
    p.aside {
      color: gray;
      border-style: solid;
    }
  • color属性也影响表单元素，但表单元素，就像图像一样，是可替换元素。它们实际上并不是 HTML 文档的内容，CSS 不会对可替换元素的内容进行样式设置的。不同浏览器之间表单样式是不一致的，所以，表单元素是非常棘手的，应谨慎处理。

背景色 (Backgrounds)

  • 默认情况下，元素的背景色区域包含内容区，填充，边框则绘制在背景色之上。
  • background-color默认值transparent,背景色不可继承。

background-clip

1
2
3
4
5
Value:            [border-box|padding-box|content-box|text]
Initial value:    border-box
Applies to:       All elements
Inherited:        No
Animatable:       No

  • background-clip定义了背景绘制区域，背景同时绘制在边框可见区域的后面。

  • 一些注意事项

    • background-clip不能作用于根元素（html）
    • 如果元素有圆角(border-radius)，则背景区域也会相应的精确减少。
    • background-clip与background-repeat交互效果很差
    • background-clip只定义了背景的裁剪区域，它不会影响到其他背景属性，比如background-image

background-position

1
2
3
4
5
6
7
8
9
Value：         <length> || <length>
                <positon> || <positon>
Values：        0% 0%
Percentages：   参考元素背景区域和图像上对应的点（top-left）
Inherited：     No
Animatable:     Yes

<length>: 百分比，长度值
<position>: top, center, bottom, left, right

  • background-position如何确定图像在元素背景区域中的位置。

  • background-position指定两个值，一个定义 x 坐标，一个定义 y 坐标。指定一个值，则第二个值默认为center。

  • background-position: 0% 0%;：图像的左上角与元素背景区域的左上角对齐。等同于background-positon: left top;

  • background-position: -50px -50px;: 图像以元素背景区域左上角为参考，向左偏移 50px，向上偏移 50px。

  • background-position: 50% 50%;: 图像的 50%，50%点同元素背景区域 50%，50%的点对齐。等同于background-position: center center
    偏移量计算：
    x 方向：(背景区域宽度 - 图像宽度) - x 方向百分比
    y 方向：(背景区域高度 - 图像高度) - y 方向百分比
    假如 图像 300px，300px, 元素背景区域 500px,500px, 计算偏移量：x 方向：100px; y 方向：100px;

  • 百分比值，偏移量计算

    1
    2
    3
    (container width - image width) * (position x%) = (x offset value)

    (container height - image height) * (position y%) = (y offset value)

background-repeat

  • 指定两个值，第一个应用于水平方向，第二个应用于垂直方向。指定一个值，则水平，垂直方向都应用，除了repeat-x,repeat-y。
Single Keyword Equivalent Keywords
repeat-x repeat-x no-repeat
repeat-y no-repeat no-repeat
repeat repeat repeat
no-repeat no-repeat no-repeat
space space space
round round round
  • 当指定background-position时，图像的重复从指定位置向两边重复的。
  • space,它计算出一个给定轴上可以重复图像多少次，然后按一定的间隔将它们分开，这就重复的图像就可以从背景区域的一边重复到另一边。保证图像在边缘处不被裁剪，是完整的。如果图像重复超过一次，就会忽略/覆盖掉background-position指定的位置
  • round,最有可能导致图像的缩放,使图像重复适合的整数次数。而且它不会忽略/覆盖掉background-position指定的位置。 所以，确保重复模式合适且不会裁剪图像的唯一方法将图像放在角落。

background-attachment

background-attachment属性决定了背景图像的位置是在视口（viewport）内固定，还是随着包含它的区域滚动。

  • scroll，默认值，表示背景相对于元素本身固定，不随着它的内容滚动
  • fixed, 表示背景相对于视口固定。即使元素有滚动，背景也会随着元素、或元素内容滚动
  • local, 表示背景相对于元素的内容固定，并且背景的绘制区域和地位区域是相对于可滚动的区域而不是包含它的边框。
  • 参考 MDN background-attachment

background-size

1
2
3
4
5
Value:          [<length>|<percentage>|auto]{1,2}|cover|contain
Initial value:  auto
Applies to:     All elements
Inherited:      No
Animatable:     Yes
  • background-size设置图片大小，可拉伸到新尺寸，也可保持原有比例的同时缩放到元素的可用空间尺寸。
  • 指定两个值，第一个指定图片的宽度，第二个指定图片的高度；一个值，这个值指定图片的宽度，图片的高度默认为auto
  • <length>值，不能为负值;<percentage>值，相对于背景区域（background positioning area）的百分比。背景区域由background-origin设置，默认为盒模型的内容区于填充。如果background-attachment为fixed，背景区域为浏览器可视区（视口）,不包含滚动条。
  • auto，以背景图片的比例缩放。
  • cover,缩放背景图片以能完全覆盖背景区域。尽可能大的缩放背景图片，并保持图片的宽高比例。
  • contain，缩放背景图片以完全装入背景区域，背景区域可能有部分空白。
  • 一个auto，另一个不是auto,如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值和固有比例计算。如果没有固有比例，则指定长度使用指定值，未指定的长度使用图像相应的固有长度，若还没有固有长度，则使用背景区域相应的长度。
  • 位图一定有固有尺寸和固有比例；矢量图可能二者都有，也可能只有一个。渐变视为只有固有尺寸或只有固有比例的图片

background

1
2
3
4
5
6
Value:          [<bg-layer>,]* <final-bg-layer>
Initial value:  Refer to individual properties
Applies to ；   All elements
Inherited:      No

<bg-layer>: <bg-image>||<position>[/<bg-size>]?||<repeat-style>||<attachment>||<box>||<box>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
  background-color: white;
  background-image: url(jiang.png);
  background-position: top left;
  background-size: 50% 50%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-origin: border-box;
  background-clip: padding-box;
}

body {
  background: white url(jiang.png) top left/50% 50% repeat-y fixed border-box padding-box;
}

简写语法需要注意地方如下：

  • 在每一层中，下列的值可以出现 0 次或 1 次：

    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>

  • <bg-size>只能紧跟着<position>后面出现，并且以/分割，如:top left/50% 50%

  • <box>可能出现 0 次，1 次，2 次。如果出现 1 次，它同时设定background-origin和background-clip。如果出现 2 次，第一次设定background-origin，第二次设定background-clip

  • background是一个简写属性，它有其默认值，所以它的默认值可以覆盖之前给定的值。如下，h2的其它background属性被默认值覆盖。

    1
    2
    3
    4
    5
    6
    7
    8
    h1, h2 {background: gray url(thetrees.jpg) center/contain repeat-x;}
    // 错误
    h2 {background: silver;}

    // 正确
    h2 {
      background-color: silver;
    }

渐变 （Gradients）

阴影（Box Shadows）

1
box-shadow: none|h-offset v-offset blur spread color | inset;
  • box-shadow由,分割的列表来描述一个或多个阴影效果。如果设置了border-radius，阴影也会有圆角效果。
  • blur，阴影模糊半径，值越大，模糊面积就越大，阴影就越大越淡。
  • spread,阴影大小，正值，阴影扩大，负值，阴影收缩。默认为 0.
  • inset，变为内部阴影。

爱学兮Front End & Vue & TypeScript

前端狗，偶尔思考，间歇式码字