CSS background系列属性

普拉斯强

一、元素背景是指哪些区域

默认情况下元素的背景是指元素border(包含border)以内的区域。

clipboard.png

在CSS3中可用使用background-clip改变元素背景区域。

1.1 background-clip

指定背景在被应用元素上的绘制区域。元素盒模型包含content, padding, border, margin。默认背景绘制的区域包含:content+padding+border,不包含margin区域。通过该属性可以控制绘制的区域。

background-clip: border-box|padding-box|content-box|initial|inherit|text;

其中取值text比较吊炸天,即背景只显示在文本区域,可以实现美轮美奂的文字啦。

  1. 该属性颜可以影响颜色类型和图片类型的背景;
  2. 背景只能在可绘制区域里绘制,其他区域如margin区域是不会绘制的。

二、背景颜色

2.1 background-color

指定背景的颜色

  1. 只能设置一个颜色值,特殊的颜色值:transparent,也是默认值;
  2. 通过background-clip属性可以控制background-color的应用范围;
  3. background-clip属性要先背景颜色属性时,否则该background-clip属性无效(背景图片就没有这个问题)。

三、背景图片

3.1 指定背景图片

1)background-image

给元素指定一个或多个图片类型的背景(而只能指定一种背景颜色)。CSS3可以指定多个背景图片了。多个图片之间用逗号隔开,其他相关的属性可以做作用于多个背景图片上,也是用逗号隔开。

  1. 多个背景图片之间的显示互相独立,各不影响;
  2. 可以同时指定背景图片和背景颜色;
  3. 背景图片本身是有自身尺寸的(background-size),被应用元素也有自己的尺寸。被应用元素没有被背景图片覆盖的区域则会通过重复绘制背景图片(当然了可以通过CSS属性修改默认的方式)的方式进行覆盖整个绘制区域。

3.2 背景图片相关的属性

背景图片本身是有自身尺寸的(background-size),被应用元素也有自己的尺寸。可以对背景图片进行更复杂的操作。

1)background-origin

原点(origin)是指背景图片开始绘制起始点,默认情况下原点在被应用元素的padding区域的左上角位置。通过background-origin属性可以修改原点位置。以原点向右有X坐标轴正方向,向下为Y坐标轴正方向,背景图片就按照这个坐标系统开始重复绘制背景图片。坐标系的反方向都是重复方式绘制。

background-origin: padding-box|border-box|content-box|initial|inherit;
  1. 原点的坐标系是个矩形区域;
  2. 可能我们会想当然的认为背景的绘制区域(backgroud-clip)的左上角就是背景图片绘制的原点,但实际却不是这样的,他们俩没有必然的关系:
  • 首先原点和绘制区域的默认值是不一样的
  • 甚至原点可能在绘制区域的外面

2) background-position

背景图片的左上角称为背景图片的位置。该位置是相对于原点构建的坐标系,默认情况下该位置就是在原点。通过background-position可以指定图片相对于原点移动的位置(也可以认为移动背景图片到指定的位置)。

background-position-x: xpos | inherit | initail;
background-position-y: ypos | inherit | initail;
// 简写形式
background-position: xpos [ypos] | inherit | initail;
  1. xpos取值:

    • 绝对值:图片左上角相对于原点X轴方向移动距离;
    • 百分比:计算方式比较奇葩。
      background-position-x: 10%并不是表示图片左上角相对于原点X轴方向移动10%,而是表示背景图片X轴方向10%的位置(基于图片Size计算)和原点坐标X轴方向10%的位置(基于原点矩形宽度计算)对齐。计算方式有点绕,主要目的是通过这种计算方式可以很容易实现背景图片的对齐:如0%即表示左对齐,50%表示居中,100%表示右对齐。
    • 关键词left: 表示图片的左侧跟原点矩形左边对齐,相当于0%,0
    • 关键词center:表示背景图片在原点矩形中左右居中,相当于50%
    • 关键词right:表示图片的右侧和原点矩形的右侧对齐,相当于100%
  2. ypos取值:

    • 绝对值:相对于原点Y轴方向距离
    • 百分比:类似xpos取值百分比
    • 关键词top:表示图片的上边和原点矩形上边对齐,相当于0%, 0
    • 关键词center:表示背景图片在原点矩形上下居中,相当于50%
    • 关键词bottom:表示背景图片的底部和原点矩形的底边对齐,相当于100%
  3. 总结一下就是:绝对值用来控制图片移动距离,百分比值控制图片对齐方式,关键词值是对齐方式的简写形式。

3)background-repeat

一方面背景图片可能比背景区域小, 另一方面背景图是从origin位置开始绘制的,部分背景区域可能在原点坐标系的负方向。对那些没有被背景图片覆盖的区域,浏览器默认会通过从左到右,从上到下的方向进行重复绘制背景图片,原点的负方向也是按照这个方式重叠绘制。通过background-repeat属性可以控制是否重复以及怎么执行重复绘制背景图片。

background-repeat: repeat | repeat-x | repeat-y | space | round | initital | inherit
  1. repeat-x, repeat-y, repeat
    是浏览器默认的行为:从上到下,从左到右,背景图片可能会发生剪切
  2. space
    space让背景图片在不发生剪切的情况下尽可能多的重复,如果有多余的空隙,则均分在各个背景图片之间。
    注意space只是保证原点矩形内背景图片不发生剪切,对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复
  3. round
    round跟space类似,但是如果有多余的空隙则背景图片通过缩放的方式侵占空隙。
    拉伸:多余的空间小于背景图片一半
    压缩:多余的空间大于背景图片的一半
    注意round跟space类似,round也只是保证原点矩形内背景图片不发生剪切,对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复。

4)background-size

背景图片可能具有原始的尺寸,可以通过background-size指定背景图片的大小,进而可以对背景图片进行缩放操作。

background-size: auto | width [height] | cover | contain | initail | inherit
  1. auto表示使用图片的本身的尺寸;
  2. width [height] 指定具体的长度,

    • 绝对值
      指定具体的值
    • 百分比
      相对于原点矩形的尺寸计算
  3. cover
    首先保证背景图片平铺整个绘制区域,如果背景图片小,则通过等比例方式拉伸
  4. contain
    首先保证背景图片完整显示背景图片,如果背景图片大,则通过等比例方式缩小

5) background-blend-mode

指定多个背景图片混合模式

6) background-attachment

指定背景图片的固定方式。

background-attachment: scroll|fixed|local|initial|inherit;
  1. scroll: 表示背景图片相对于元素本身固定,即它会随着被应用元素的滚动而滚动;
  2. fixed: 表示背景图片相对于元素的视口固定,即它不会随着被应用元素的滚动而滚动;
  3. local: 表示背景图相对于应用元素的内容而固定,即如果被应用元素的内容有滚动,则其会随着被应用元素的内容滚动而滚动(注意和fixed区别)。

7) background

简写格式

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

额,好长,记不清的话还不如使用具体的backgroud属性。方便的记忆法:

  1. 先确定背景类型
  2. 如果是图片,则确定图片的属性(位置,大小,重复方式,绘制起始点)
  3. 确定绘制区域
  4. 背景图片固定方式

四、总结

  1. 绘制元素背景的条件:

    • 首先要确定背景区域;
    • 确定背景类型:颜色、图片;
    • 如果是图片还可以更细致的控制。
  2. 除了background-clip可以应用于background-color其他属性都是用于background-image的;
  3. 如果background-clip取值为border-box,则border会覆盖在background上面,即border的颜色或者图片会覆盖背景颜色或者图片。
阅读 3k

前端er

2.4k 声望
44 粉丝
0 条评论

前端er

2.4k 声望
44 粉丝
文章目录
宣传栏