跳至主要內容

04.颜色、背景和渐变

12a2024/10/3大约 17 分钟HTML5前端

04.颜色、背景和渐变

4.1 颜色

  • 一个颜色值可以通过如下方法定义
    • 具名颜色或其他关键字
    • 十六进制标记
    • 函数标记的颜色空间
      • sRGB 颜色空间：hsl()、hwb()、rgb()
      • CIELAB 颜色空间：lab()、lch()
      • Oklab 颜色空间：oklab()、oklch()
      • 其他颜色空间：color()
    • 通过混合两个颜色：color-mix()

4.1.1 具名颜色和颜色关键字

  • 如果只想使用基本的颜色，最简单的方法就是使用颜色的名称，最早支持16种基本颜色，目前已支持一百多种颜色，支持的颜色可在具名颜色页面查看
  • 在CSS中定义了在任何允许使用颜色的地方使用的关键字：transparent和currentColor
    • transparent：表示透明，无颜色
    • currentColor：表示color属性值，如果用在color上会继承父元素的color值

4.1.2 十六进制颜色

  • 十六进制RGBa颜色#RRGGBBaa：
    • 通过使用16进制数字串表示三种颜色数值，简化表示所有RGB颜色
    • 可选额外添加透明度部分aa，透明度也使用两位十六进制数字表示，ff表示不透明，将透明度值分成256种数值
    • 如果数字两两相等，支持缩写，比如：#6FA表示#66FFAA，#663399AA表示#639A

4.1.3 sRGB颜色空间

  • sRGB颜色空间是早期为显示器和互联网设计的一种标准RGB颜色空间，定义了红色、绿色与蓝色三原色的颜色。对于专业的印刷等工作色域不够大，但现在仍是互联网推荐使用的色彩空间

rgb()

  • 函数式RGB颜色rgb(red green blue)通过颜色空间中的红色、绿色和蓝色分量来表达颜色，可选的alpha分量代表了颜色的透明度

    • 其中每种颜色可以使用百分比或[0,255][0, 255]中的数字
    • 旧版参数中存在分隔三种颜色值的逗号，现在可以省略

    为了保证浏览器兼容性，可以考虑使用,分隔三种颜色值，此时三种颜色应该同时使用百分比或整数形式

    • 百分比最后会通过乘以255255后得到对应的数字值
    • 如果超过对应数值范围的数字将被裁剪为最近的边界值
    • rgb()现在已支持透明度参数，允许使用rgb(R G B / A)的方法添加透明度参数，透明度的取值范围是[0,1][0, 1]，当透明度为1时表示不透明，比如：rgb(103, 171, 133 / 0.9)

    rgba()是rgb()的别名，支持相同的参数

    相对颜色

    rgb(from <color> R G B[ / A])支持相对颜色，即对一个原有的CSS颜色表达式进行重新设置得到新的rgb颜色

    /* 计算中使用的r、g、b是原颜色的rgb通道的数值，alpha是原颜色的透明度 */
rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1));

hsl()

  • HSL是色相(Hug)、饱和度(Staturation)和明度(Lightness)的简称
    • 色相：色轮的角度值，取值范围为[0,360][0, 360]，其中 0和360表示红色，120表示绿色，240表示蓝色
    • 饱和度：颜色饱和度，取值范围从0%到100%
    • 亮度：取值范围从0%(黑色)到100%(白色)，50%表示正常

4.2 背景

  • 默认情况下，背景一直延伸到边框外边界，因此，内边距和边框也在背景范围内，边框默认在背景之上绘制
  • 背景属性均不继承，可以通过inherit全局关键字强行继承，子元素的背景将出现在父元素背景之上，效果应该不会太好
  • 支持同时指定多个图片背景，背景指定和对应属性全通过,隔开
    • 颜色背景不支持定义多个颜色
    • 前面的背景会覆盖后面的，因此，如果是通过background定义多背景时，颜色壁纸应该放最后，或通过background-color单独定义
  • background可以完成所有背景属性的合并，但对每个背景要满足以下要求
    • clip和origin的属性值相同，因此
      • 如果出现1次，它同时设定origin和clip
      • 如果出现2次，第一次的出现设置origin，第二次的出现设置clip
    • 除了上面的clip和origin，所有属性最多只可以出现一次
    • size要紧跟着position之后，并使用/拼接在一起

    如果值未出现，将使用默认值

4.2.1 颜色背景和图像背景

  • 元素背景的颜色使用background-color设置，值为任意颜色值，初始值为透明
    • 通过设置内边距，可以实现多颜色边框效果
    • 结合元素文本颜色或其他置换元素的颜色，可以简单实现反色等效果
    • 如果为body或html设置颜色，会发现浏览器会将颜色扩充到整个页面。因为浏览器会依次从html到body读取非透明颜色，然后将这个颜色渲染到整个页面
  • 要使用图片作为背景可以通过background-image设置，支持图片值

  • 对于图片而言，有以下属性

  • background-repeat定义了图片重复方式，背景图像可以

    • repeat-x水平轴重复
    • repeat-y垂直轴重复
    • repeat两个轴重复
    • no-repeat根本不重复，不重复的图片位置可以通过
    • space尽可能得重复，但是不会裁剪
    • round随着允许的空间在尺寸上的增长，被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像

    space和round的区别

    • 如果容器空间小于图片大小
      • space背景图会被裁切
      • round缩放背景图至容器大小，填满容器空间
    • 如果容器空间大于图片大小
      • space在不缩放的前提下尽可能多的重复图片，如果有剩余空间，均匀地分布图片，两端图片和空间边缘接触
      • round充分利用容器空间，重复n次之后，如果剩余空间大于等于imgWidth∗0.5imgWidth*0.5再重复一次并缩放，否则拉伸目前重复的背景图。最终效果是将空间填满

    支持单值或多值语法

    单值等价于双值
    repeat-xrepeat no-repeat
    repeat-yno-repeat repeat
    repeatrepeat repeat
    spacespace space
    roundround round
    no-repeatno-repeat no-repeat

  • background-attachment属性决定背景图像的位置是在浏览器视口内固定，或随着包含它的区块滚动，属性初始值为scroll

    • fixed：此关键属性值表示背景相对于视口固定，无论是区块滚动还是视口滚动，看到的背景都不会变化
    • local：此关键属性值表示背景相对于元素的内容固定，如果区块元素拥有滚动条，背景将会随着元素的内容滚动
    • scroll：此关键属性值表示背景相对于元素本身固定，但随视口滚动

  • background-origin规定了指定背景图片摆放参考框的位置，当使用background-attachment为fixed时，该属性将被忽略不起作用，默认是padding-box

    • border-box：背景图片的摆放以border区域为参考
    • padding-box：背景图片的摆放以padding区域为参考
    • content-box：背景图片的摆放以content区域为参考

  • background-position属性为每一个背景图片设置初始位置。这个位置是相当于由background-origin设置的背景相对区域参考框，应该设置背景图片不重复再使用此属性，初始值为0% 0%，对应为左上角，支持使用各种位置值

  • background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸，属性值有下面的几种情况

    • 关键字：
      • contain：缩放背景图片以完全装入背景区，可能背景区部分空白
      • cover：缩放背景图片以完全覆盖背景区
    • 单个值，这个值指定图片的宽度，图片的高度隐式的为 auto(保持对应的比例)
      • auto：使用对应的宽度
      • 长度值
    • 两个值，第一个值指定图片的宽度，第二个值指定图片的高度，支持长度值或auto

    默认是auto auto，即使用图片的长和宽

4.2.2 其他背景属性

  • 裁剪背景background-clip：背景默认填满整个背景区域，但可以通过这个属性控制背景延伸到何处，默认为border-box
    • border-box：背景延伸至边框外沿(但是在边框下层)
    • padding-box：背景延伸至内边距(padding)外沿
    • content-box：背景被裁剪至内容区(content box)外沿
    • text：背景被裁剪成文字的前景色，需要设置color:transparent，不然会被默认前景色生成的字体遮住，如果是半透明的前景色，会混合成另外的颜色

    safari在2020年9月之前，如果需要设置text属性值，只能使用-webkit-background-clip，通用的裁剪属性不支持text

  • 背景混合效果background-blend-mode：定义该元素的背景图片，以及背景色如何混合，支持大量混合效果关键字，具体见MDN文档

    mix-blend-mode描述了元素与其他元素(父元素或重叠元素)的背景如何混合，也支持这些混合效果关键字，见混合

4.3 渐变

  • 渐变是由css实现的图像类型：有线性渐变和径向渐变等多种类型，并且每种渐变又分为循环和不循环渐变
  • 由于渐变是动态生成的，因此可以消除对传统用于实现类似效果的栅格图像文件的需求。渐变在放大时看起来比栅格图像更好，并且可以动态调整大小
  • 渐变的特点是没有大小，如果background-size对应大小为auto，对应尺寸将为100%，占满整个元素

4.3.1 线性渐变

  • 线性渐变创建了一条沿直线前进的颜色带

  • 要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标color stop。至少指定两个色标，也可以指定任意数量

    .simple-linear {
  background: linear-gradient(blue, pink);
}

  • 改变渐变的方向：默认情况下，线性渐变的方向是从上到下，你可以在函数第一个参数，指定一个值来改变渐变的方向，这个值可以如下设置

    • 通过关键字指定方向，使用to和最多两个方向关键字，指定渐变方向，一个指定水平位置(left或right)，另一个指定竖直位置(top或bottom)

    • 使用角度值指定具体方向，0deg等价to top，增加值将向顺时针方向旋转，对应角度从红色到白色的效果如下图

      使用角度指定线性渐变方向
      使用角度指定线性渐变方向

    如果指定元素四角方向和固定的角度方向，如果元素的比例发生变化，最后的效果将不同

    .diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

  • 色标位置：每个颜色后可以增加位置值，把默认的均匀累进的颜色变化改为其他方式，设定位置的颜色将出现在对应位置，两个颜色之间依然均匀变化，有几点需要注意

    • 渐变位置如果使用百分比，0%表示起始点，而100%表示终点，对应渐变图形在方向直线上的投影的第一个点和最后一个点，其他的百分比也这样对应，这条直线被称为梯度线

      线性渐变的合成
      线性渐变的合成

    • 渐变位置可以使用负值，不在0-100%的颜色将被截断

    • 如果没有设置将自动计算，默认第一个色标在0%处，最后一个色标在100%，其他的色标则位于其相邻的两个色标正中间

    • 一般设置一个位置值，最多允许两个位置值，如果设置两个表示在这个位置区间内都为这种颜色，开始的0%和最后的100%可以省略

    • 如果在某些区间没有颜色，使用之前的颜色，如果是初始区间使用之后的颜色

    • 如果两个颜色的位置重叠，那将在两边看到不同的颜色，这条线也被称为硬线

    通过设置两个颜色位置重叠，可以实现条纹效果
    <div class="stripes"></div>
    .stripes {
  width: 120px;
  height: 5px;
  background-image: linear-gradient(to right, transparent 10%, gray 10% 20%, transparent 20% 30%, gray 30% 40%, transparent 40% 50%, gray 50% 60%, transparent 60% 70%, gray 70% 80%, transparent 80% 90%, gray 90%);
}

  • 设置中色点：默认情况下两种颜色的累进的中点是50%，可以通过在两个颜色中间添加不带颜色的渐变色标(即只使用单个长度值)设置

    设置效果
    <table>
<tr>
  <td id="ex01">50%</td>
</tr>
<tr>
  <td id="ex02">33%</td>
  <td id="ex03">67%</td>
</tr>
<tr>
  <td id="ex04">25%</td>
  <td id="ex05">75%</td>
</tr>
</table>
    table {
    border-spacing: 10px;
}
td {
    width: 120px;
    height: 30px;
    color: #fffc;
    line-height: 30px;
}

#ex01 {background:linear-gradient(to right,#000 25%,rgb(90%,90%,90%) 75%);}
#ex02 {background:linear-gradient(to right,#000 25%,33%,rgb(90%,90%,90%)
75%);}
#ex03 {background:linear-gradient(to right,#000 25%,67%,rgb(90%,90%,90%)
75%);}
#ex04 {background:linear-gradient(to right,#000 25%,25%, rgb(90%,90%,90%)
75%);}
#ex05 {background:linear-gradient(to right,#000 25%,75%, rgb(90%,90%,90%)
75%);}

4.3.2 径向渐变

  • 径向渐变是从一个中心点向外辐射的渐变，你可以指定中心点的位置。你还可以使其为圆形或者是椭圆形

    • 径向渐变由其中心点、结束形状轮廓、两个及以上色标定义而成
    • 色标位于虚拟渐变射线virtual gradient ray上，该渐变射线从中心点水平向右延伸
    • 如果使用百分比的色标位置，对应颜色椭圆和此渐变射线的交点在椭圆半轴上的百分比，100%对应设定的渐变大小
    • 每个形状都是单个颜色，并由其相交的渐变射线上的颜色确定
    径向渐变的合成
    径向渐变的合成

  • 和线性渐变一样，创建径向渐变所需要的就是两个颜色。默认情况下，渐变的中心点是50% 50%的位置，且渐变是椭圆的以元素盒的比例

    .simple-radial {
  background: radial-gradient(red, blue);
}

  • 设置渐变中心和渐变大小：默认情况下，渐变是从元素盒中心，形成一个与元素边角相切的椭圆，这两个值都通过可选的第一个属性设置大小 at 中心坐标

    边角相切不太能直接看出来，因为最后一个颜色的形状被边界切断

    • 大小支持下列值，如果大小过小，最后看起来是最后一个颜色的纯色效果

      • 关键字
      关键字描述
      closest-side渐变结束形状与容器距离渐变中心点最近的一边(或最近的垂直和水平边)相切
      closest-corner渐变结束形状与容器距离渐变中心点最近的一个角相交
      farthest-side形状与容器距离渐变中心点最远的一边(或最远的垂直和水平边)相切
      farthest-corner默认值，渐变的结束形状与容器距离渐变中心点最远的一个角相交
      • 椭圆+两个半径长度值ellipse 50% 50px，第一个值代表了水平半径，第二个值是竖直半径，可以使用百分比以表示相对于盒在那个维度上的大小的值
      • 圆+一个半径长度值circle 50px
      • 直接给出值，一个成圆，两个成椭圆，如果只给出一个值，不能使用百分比

    • 中心坐标支持使用各种位置值，其中

      • 关键字：上top、下bottom、左left、右right，对应贴着四个元素参考框边界放置，还有center对应50% 50%
      • 长度，百分比是以对应方向的元素尺寸(长/宽)计算的，长度值可以为负数或超过元素参考框大小
      .radial-ellipse-far {
  background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

  • 设置色标位置：和线性渐变一样，你可以用百分比或者绝对长度指定每个径向色标的位置，最后一个径向色标的位置可以比渐变大小小，这样会在渐变大小内过渡到最后一种颜色；可以比渐变大小大，在渐变大小外完成最后一次过渡

    .radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

4.3.3 锥形渐变

  • 和线性和径向的渐变类似，创建锥形渐变所需要的就是两个颜色。默认情况下，渐变的中心位于50% 50%的位置，支持使用各种位置值，渐变的开始点是朝上的

    .simple-conic {
  background: conic-gradient(red, blue);
}

  • 改变渐变中心和起始角度from 起始角度 at 中心坐标

    • 起始角度：可设置角度值，上方是0，随着顺时针增大
    • 中心坐标：和径向渐变一致
    div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}

  • 设置色标位置：支持1圈内的角度值，如果角度值不在一圈内将不会显示，也支持百分比，100%对应360度(支持百分比不在当前规范中)

    • 每个颜色支持两个角度值，可以在一个区域展示固定颜色
    div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

  • 锥形渐变语法与径向渐变语法类似，但色标放置在渐变圆弧(圆的周长)周围，而不是从渐变中心出现的渐变线上

    • 使用锥形渐变时，颜色会围绕圆心旋转，从顶部开始顺时针旋转
    • 在径向渐变中，颜色从椭圆中心向各个方向向外过渡
    锥形渐变的合成和比较
    锥形渐变的合成和比较

  • 渐变是一种图片，因此可以使用背景图片的属性对渐变做处理，比如：

    棋盘纹理
    <div id="conic-chessboard"></div>
    #conic-chessboard {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    #fff 0.25turn,
    #000 0.25turn 0.5turn,
    #fff 0.5turn 0.75turn,
    #000 0.75turn
  )
  top left / 25% 25% repeat;
  border: 1px solid;
}

  • 一般情况下，对于渐变图片需要设置的内容包括

    • 渐变图片的大小
    • 是否需要重复
    • 渐变图片的位置

4.3.4 循环渐变

  • 虽然渐变可以通过背景图片的属性进行控制，但是在图片重复时，可能遇到裁切位置不对带来的错误图片效果，可以使用循环渐变避免裁切
  • 使用repeating-*形式的渐变
    • repeating-linear-gradient()：提供的颜色列表将线性重复，如果提供的是绝对长度值，将不断重复这些颜色，直到装满这个元素；如果提供的是百分比，将不断重复设定的百分比区域内的颜色
    • repeating-radial-gradient()：提供的颜色列表将在所有方向上无限重复色标，以覆盖其整个容器
    • repeating-conic-gradient()：提供的颜色列表对应的渐变弧将重复，直到覆盖到整个圆

    使用循环渐变时，要注意一些非循环渐变需要设置的图片的设置属性一般不需要再设置，比如是否重复、图片位置、渐变图片的大小

最近更新