CSS 背景

CSS 背景

背景颜色

背景颜色若不设置，默认为透明(transparent)

background-color: 颜色;

背景颜色半透明

background: rgba(0, 0, 0, 0.3)

前三个参数设定颜色，最后一个参数（例如上述例子中的0.3）设定透明度。0～1: 0对应透明，1对应实色

背景图片

常用于logo / 装饰性的小图片 / 超大背景图

该设定易于控制位置

background-image:  (url)

背景图片位置控制

background-position: x y;

x：x坐标

y：y坐标

可以使用方位名词 或者精确单位

1、方位名词

left | right | center 对应水平方向

top | bottom | center 对应垂直方向

需求设定：水平居中 垂直靠上

background-portion: center top

注意：

（1）center top 与 top center 效果等价，即两者的顺序可交换

（2）若只写出一个方位，则另一个方位参数默认为center

2、精确单位

若使用精确坐标，两个方位输入有严格顺序

background-position: x y;

x严格对应水平方向，y严格对应垂直方向

eg：

background-position: 20px 50px;

20px对应与左边的距离为20px，50px对应与上边的距离为50px

3、混合单位

混合单位指：方位名词+精确单位

同理，两个方位有严格顺序。

eg：水平方向与左边距离20px，垂直方向居中。

background-position: 20px center;

背景平铺

对一个盒子设定背景图片，当图片尺寸小于盒子，则图片将重复以平铺满盒子（默认情况），如下图所示：

完全不平铺

设定：

background-repeat: no-repeat; //不平铺

则背景图不会平铺满整个盒子，如下图所示：

仅x轴平铺

background-repeat: repeat-x;

仅y轴平铺

background-repeat: repeat-y;

背景平铺总结

注意：背景图片和颜色可以同时设定，但是图片会盖在颜色上方。

背景固定与滚动

background-attachment: fixed | scroll; 

fixed：背景图片固定

scroll：背景图片随着对象内容而滚动

背景属性复合写法

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

背景总结