CSS - 背景和边框

background属性

整合属性, 整合了所有背景属性

语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment

注意点:

1. 上述属性值, 均可省略, 表示使用默认值
2. 一个元素可设置多个背景, 用逗号( , )分隔
3. 设置多个背景会出现 背景层叠 效果, 放在最前的背景是顶层背景
4. 为了避免背景覆盖问题, 建议带bg-color( 背景色 )/ 非透明 的背景图放在最后面

background-color

设置背景色, 语法: backgound-color: <color>|none|transparent

注意点: 背景的总大小是盒模型的大小( 包括内边距和边框 )

background-image

设置背景图片, 语法: background-image: url('图片URL')

注意点:

1. 背景图片默认 起始放置 在元素的 左上角(边框内)
2. 如果图片原大小大于背景区域大小则 裁剪, 否则 平铺(平铺至边框)

background-position

设置背景图片的起始位置, 语法: background-position: <horizeontal> [<vertical>]

水平方向取值: <length>、<percentage>、left、center、right

垂直方向取值: <length>、<percentage>、top、center、bottom

注意点:

1. 取特殊属性值(left、right、top、bottom)时, 只设一个方向, 另外一个方向默认为center
2. 设置<length>或者<percentage>时, 只设一个值表示给水平方向设值, 而垂直方向居中(center)

background-size

设置背景图片的大小, 语法: background-size: <length>|<percentage>|cover|contain

注意点:

1. 设置<length>或者<percentage>时均有水平和垂直方向两值, 省略垂直方向表示根据图片原大小等比缩放
2. cover 表示图片将等比缩放成完全 覆盖 背景区域的最小大小( minSize )
3. contain 表示图片将等比缩放成 适合 背景区域的最大大小( maxSize )

   

background-repeat

设置背景图片的平铺效果, 语法: background-repeat: val

属性值:

1. repeat 默认值, 向水平垂直方向重复
2. repeat-x 只向水平方向重复
3. repeat-y 只向垂直方向重复
4. no-repeat 不会重复

background-origin

设置背景起始的定位位置, 语法: background-origin: val

属性值:

1. padding-box 默认值, 相对内边距左上角进行定位

2. border-box 相对边框左上角进行定位

3. content-box 相对于内容左上角区域进行定位

   

background-clip

设置背景的绘制区域, 语法: background-clip: val

属性值:

1. border-box 默认值, 绘制区域是整个盒子模型

2. padding-box 绘制区域在边框内

3. content-box 只绘制内容区域

   

background-attachment

设置背景图片依附(跟随), 语法: background-attachment: val

属性值:

1. scroll 默认值, 依附与元素(元素滚动时, 背景图片滚动)
2. fixed 依附于浏览器(视口), 即固定在视口中
3. local 依附于元素内容(内容发生滚动时, 背景图片跟随滚动)

注意点, 设置为fixed后, 背景图片的background-position将相对视口进行定位(固定定位)

CLICK HERE !!! background-attachment示例demo

background-image属性与img元素标签

border-image属性

语法: border-image : source [slice] [/ width /] [/ outset /] [repeat]

注意点:

1. 使用border-image前需要设置border属性(起码含 width 和 style 值)
2. width和outset在整合属性中设置时, 需要用 / 按顺序连接
3. source 是必须值, 其他不设置则使用默认值(具体看下文)

border-image-source

设置边框图片的路径, 语法: border-image-source: url('边框图片URL')

border-image-slice

设置边框图片的裁剪位置, 语法: border-image-slice: val

注意点:

1. 没有单位, 默认计量单位为(px), 支持百分比, 参照物是边框图片的大小, 默认值100%, 表示不裁剪
2. 可接收 1 ~ 4 个参数, 规则与margin/padding一样, 表示上、右、下、左，画出4条线， 裁剪出一个九宫格区域

   

3. 默认裁减掉中间部分, 使用fill关键词, 则可填充中间部分, 类似于background-image

border-image-width

设置图片边框的宽度( 控制边框图片的绘制区域, 语法: border-image-width: <length>

注意点:

1. 默认计算值与border-width一样
2. 可接收 1 ~ 4 个参数, 规则与margin/padding一样
3. 支持<number>或者<percentage>参照border-width进行计算

border-image-outset

设置图片边框与变宽的偏移量( 向外扩散 ), 语法: border-image-outset: <length>

注意点:

1. 默认值为0, 不做扩散
2. 仅支持正值, 可接收1 ~ 4 个参数, 规则与margin/padding一样
3. 支持<number>, 参照border-width进行计算

border-image-repeat

设置边框图片的可重复性, 语法: border-image-repeat: val

属性值:

1. stretch 默认值, 拉伸图像填充区域
2. repeat 平铺(重复)填充区域
3. round 类似repeat 无法完整平铺所有图像, 则对图像进行缩放( 凑整 )以适应区域( 常用 )

注意点: 支持接收 2 参数, 表示分别设置水平和垂直方向的重复性

border-image渲染规则

由border-image-slice划分出的九个区域分别 对应渲染border边框的九个区域(在区域内进行拉伸、重复、扩散等操作)