CSS Colors and Backgrounds

初发布于 25 Apr 2014 | in CSS

CSS Colors

CSS 颜色有三种基本表示方法：

  1. Predefined Color names，所有现代浏览器都支持至少 140 种颜色名称表示的 CSS 颜色。Color name 是大小写不敏感的.

    常见的 17 种标准颜色有: aqua 水绿色, black, blue, fuchsia 紫红色, gray, green, lime 绿黄色, maroon 褐红色/栗色, navy 藏青色, olive 黄褐色/橄榄色, orange, purple, red, silver, teal 青色, white, and yellow

  2. RGB(Red, Green, Blue)，三原色配色表示法: rgb(255,0,0)，rgb(0,255,0)，rgb(0,0,255)。颜色密度取值在 0 和 255之间。

  3. Hexadecimal Colors 十六进制表示法，语法 #RRGGBB 或者 #RGB。十六进制取值在 00 和 FF 之间。

    HEX 值是大小写不敏感的，#ff0000 等同于 #FF0000.

CSS3 新增 Color 相关

新增属性 opacity 。

新增属性值 transparent ，它现在是一个 real color 等同于 rgba(0,0,0,0.0)

新增 functions：

  1. RGBA colors: rgba(red, green, blue, alpha)。新增的最后一个参数表示透明度，取值在 0.0 (fully transparent 完全透明) 和 1.0 (fully opaque 完全不透明)之间。
  2. HSL colors: hsl(hue 色调, saturation 饱和度, lightness 亮度)。前者取值在 0-360 之间（0 或 360 是 red，120 是 green，240 是blue），后两者按百分比取值，其中饱和度取 100% 表示 full color，最后一个亮度取 0% 是 black，取 100% 是 white。
  3. HSLA colors: 在 HSL 基础上添加了一个 alpha 透明度参数，用法同 RGBA。

CSS Backgrounds

一个元素的背景，指的是除了外边距之外元素完整的大小，包含内边距和边框。

  • background-color，设定元素背景色。属性值参考 CSS color 的取值。

  • background-image，给元素指定一张图片作为背景。默认情况下，图片被放置在元素的左上角，同时沿水平方向和垂直方向重复摆放，以覆盖住整个元素。

    Tip: 使用背景图时，记得设置 background-color 以防图片不可用。

  • background-repeat，有时背景图只需要在水平方向 repeat-x 或垂直方向 repeat-y 重复。有时只需显示一次，不需要重复 no-repeat。

  • background-position，设置背景图片的位置。

    取值描述
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom
    		 如果只设定了一个关键字，则另一个值默认为 center
    x% y%前者是水平位置，后者是垂直位置。左上角取值 0% 0%，右下角 100% 100%。如果只设定了一个值，另一个值默认为 50%
    xpos ypos左上角是 0 0，其他非零取值要使用 CSS 单位。如果只设定一个值，另一个值默认为 50%。可以混合 ％ 和带有 CSS 单位的 position 取值
    initial设为默认值
    inherit继承父元素的取值

  • background-attachment，用来指定背景图片是否位置固定，还是与页面剩余部分一起滚动。

    • scroll，默认值。即在元素外滚动，背景图跟着它所在的元素相对于 viewport 一起滚动；在元素内滚动，元素内容（local view）动，背景图不动。
    • fixed，无论在元素外还是元素内滚动，背景图相对于 viewport 和它所在的元素内容（local view）都是固定不动的。
    • local，无论在元素外还是元素内滚动，背景图都是跟着它所在的元素内容（local view）一起滚动。

All in one 简写形式

使用 background 属性，将以上属性简写进一个性质里：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

如果其中之一没有指定也没有关系，重要的是按照这个顺序写。

CSS3 Background 新属性

  1. CSS3 允许使用 background-image 给一个元素添加多个背景图，使用逗号分隔开每张背景图的参数设置。

     #example1 {
   background-image: url(img_flwr.gif), url(paper.gif);
   background-position: right bottom, left top;
   background-repeat: no-repeat, repeat;
 }
 #example1 { /* 也可以用 all in one 的方式写 */
   background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
 }

  2. background-size，指定背景图的尺寸。在 CSS3 之前，背景图片的大小就是图片的实际大小。

    现在，我们可以在不同环境里重复使用背景图。这个属性同样接受以逗号分隔的多个值，即支持多图背景。

    取值描述
    auto默认值。背景图尺寸就是图片实际大小
    xlength ylength以 px 为单位设置图片宽高。如果只设定一个值，另一个值默认为 auto
    x% y%以父元素的百分比设定背景图的宽高。如果只设定一个值，另一个值默认为 auto。
    如果取值为100% 100%图片的宽和高会拉伸以完全覆盖住内容区域，属于非等比放大。
    cover尽可能缩放背景图，以完全覆盖住内容区域。背景图的 width 或 height 达到其所在元素宽度的 100%，属于等比放大。保持宽高比，图片部分区域可能因此 invisible。
    contain缩放背景图，尽力去填满内容区域。图片的宽和高分别顶住所在元素的边缘。属于等比放大。保持宽高比，通常填不满。

  3. background-origin，指定背景图片的 background-position 应该相对于谁来放置。该性质的三个取值是：

    • border-box: 背景图从边框的左上角开始
    • padding-box: 默认值，背景图从内边距的左上角开始
    • content-box: 背景图从内容区域左上角开始

  4. background-clip，指定背景上色区域。取值种类同 background-origin。但默认值是 border-box。

CSS3 Gradients

定义了两种渐变：

  1. Linear Gradients 线性渐变。 方向可以向 (down/up/left/right/diagonally 对角地)，默认方向是 Top to Bottom，

    除了使用预定义的表示方向的关键字，还可以使用 Angles 角度，指定一条水平线和渐变线之间的角度，沿逆时针。

     background: linear-gradient(direction, color-stop1, color-stop2, ...); // color-stop 是你希望实现平滑过度的颜色

  2. Radial Gradients 径向渐变。由它们的 center 定义，必须至少定义两个 color stops。默认 shape 取值是椭圆，size 是 farthest 最远的角落， position 是中心位置。

     background: radial-gradient(shape size at position, start-color, ..., last-color);

CSS3 filter

filter 属性给元素应用一个或多个 graphical 效果，如：模糊、锐化、反色等。通常用来调整图片、背景和边框渲染。

可使用的函数有：

  • blur(px)，模糊（毛玻璃效果）。值越大越模糊。不指定任何值，则为 0
  • brightness(%)，调整图片亮度。0% 全黑；100% 是默认值，表示原图；大于 100%，比原图亮
  • contrast(%)，调整图片对比度。0% 全黑；100% 是默认值，表示原图；大于 100%，表现低对比度
  • drop-shadow()，给图片添加阴影效果，同 box-shadow
  • grayscale(%)，把图片转成灰色系。0% 是默认值，表示原图；100% 是黑白图片。不允许负值
  • invert(%)，反色，效果同旧照片的底片
  • opacity(%)，透明度
  • saturate(%)，饱和度
  • sepia(%)，深褐色调
  • hue-rotate(deg)，色调
  • url() SVG 过滤器，目前浏览器支持情况不好

应用

CSS spirit 精灵图

又称为雪碧图，把很多小图标整合成一个图片，通过 background-position 分别指定使用这张图片中的哪个小图标。好处：减少外部请求数量。

.home-icon {
  width: 16px;
  height: 16px;
  background: url('sprite.png') no-repeat 0 0;
}
.next-icon {
  width: 16px;
  height: 16px;
  background: url('sprite.png') no-repeat -16px 0;
}
.prev-icon {
  width: 16px;
  height: 16px;
  background: url('sprite.png') no-repeat -32px 0;
}

Cursor光标样式

可以通过 caret （caret-shape、caret-color）改变输入框光标的颜色和形状。

input {
  caret-color: #333;
}