CSS笔记（4）

CSS的背景

背景颜色

background-color: transparent;

一般情况下，元素背景颜色默认为transparent（透明色），我们也可以手动指定背景颜色为透明色

背景图片

一些logo或者一些装饰性的小图片或是一些差大的背景图片。
优点是非常便于控制位置。
注意：背景图片会压住背景颜色。

background-image: none;
background-image: url(images/logo,png);

背景平铺

默认情况下是平铺的。

background-repeat:repeat
background-repeat:no-repeat
background-repeat:repeat-x/*横向平铺*/
background-repeat:repeat-y/*竖向平铺*/

背景图片位置

background-position: x y;

1.参数是方位名词

background-position: center right;

background-position: right center;

background-position: right;

三个效果等价，跟x，y顺序没有关系。

2.参数是精确单位

background-position: 20px 50px;

注意：如果指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

3.混合单位
第一个值一定是x坐标，第二个值一定是y坐标。

background-position: center 20px;

背景图像固定（背景附着）

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

background-attachment：scroll;/*滚动*/
background-attachment：fixed;/*固定*/

默认是滚动的。

背景复合写法

没有特定书写顺序，一般习惯约定顺序为：
背景颜色 背景图片地址 背景平铺 配镜图像滚动 背景图片位置。

background: black url(image.png) no-repeat fixed center top;

复合写法在实际开发中更加提倡。

背景颜色半透明

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

其中a是阿尔法的缩写，表示透明度。可以将小数点前的0省掉。