CSS中的背景知识点整理

背景

在CSS 中定义的背景效果:

• background-color：背景颜色
• background-image：背景图像
• background-repeat：背景图像平铺
• background-attachment：背景图像固定方式
• background-position：背景图像在背景中的位置

而在CSS3中新增了几个新的背景属性，提供了更强大的背景元素控制。

• background-image：背景图像
• background-size：背景图像的大小
• background-origin：背景图像的位置区域
• background-clip：背景绘制的范围

CSS 中的属性

background-color

background-color 设置元素的背景颜色

可设置的值：

• 具体的颜色名：如 red、blue等
• 十六进制的颜色名：如 #ff0000、#FFFFFF等
• transparent：透明
• RGB
• RGBA
• HSL
• HSLA

background-image

background-image 设置元素的背景图像

语法：background-image: url('图片的路径') – 路径可以是本地的也可以是网上的

多张图片的话可以使用,隔开

语法：background-image: url('图片的路径'),url('图片的路径')

background-repeat

background-repeat 设置元素背景图像在页面中呈水平或垂直方向平铺

可设置的值：

• repeat：水平和垂直方向上平铺，默认
• no-repeat：不平铺
• repeat-x：在水平方向上平铺
• repeat-y：在垂直方向上平铺

background-position

background-position 设置背景图像在背景中的位置

可设置的值：

• left top/center/bottom：左上/左中/左下(水平位置，垂直位置)
• right top/center/bottom：右上/右中/右下(水平位置，垂直位置)
• center top/center/bottom：中上/居中/中下(水平位置，垂直位置)
• x% y%：百分比 (水平位置，垂直位置)
• x y：具体值 (水平位置，垂直位置)

注意：如果只设置一个属性值，则另一个属性值默认为 center

background-attachment

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。

可设置的值：

• scroll：滚动，默认 (跟随页面)
• fixed：固定
• local：滚动 (跟随元素内容)

简写

background简写没有顺序要求

background：背景颜色 背景图片地址 背景是否平铺 背景图像滚动 背景图片位置

CSS3 新增的属性

全是IE8及以下不兼容

background-image

background-image 设置元素的背景图像

这里和CSS中的background-image几乎相同，只是把CSS中的url('')换成了url()，也就是url('')中的''可以不写了。

语法：background-image: url(图片的路径) – 路径可以是本地的也可以是网上的

多张图片的话也可以使用,隔开

语法：background-image: url(图片的路径),url(图片的路径)

background-size

background-size 设置元素的背景图片的大小

可设置的值：

• width height：具体值 (宽度，高度)
• width% height%：百分比 (宽度，高度)
• cover：等比例缩放，图片完全覆盖到整个盒子，有可能图片显示不完全
• contain：等比例缩放，当高或宽其中有一个与盒子的尺寸相等，就不再缩放了

注意：如果只设置一个属性值，则另一个属性值默认为 auto

background-origin

background-origin 设置背景图像的偏移量计算的原点

如果背景图像background-attachment是fixed固定的，那个这个属性没有任何效果

• padding-box：背景图像相对于内边距定位，默认值
• border-box：背景图像相对于边框定位
• content-box：背景图像相对于内容区定位

background-clip

background-clip 设置背景的绘制区域

• border-box：背景绘制在边框方框内，默认值
• padding-box：背景不会出现在边框，只出现在内容区和内边距
• content-box：背景只会出现在内容区

简写

background: 背景颜色 背景图片路径 背景是否平铺 位置/大小

注意：

• background-size 必须写在 background-position 的后面，并且使用 / 隔开background-position/background-size
• background-origin与 background-clip 两个样式，orgin 要在 clip 的前面