CSS入门基础知识（八）——CSS的背景

CSS标签入门基础知识

CSS的背景

通过css背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color属性定义了元素的背景颜色

一般情况下元素背景颜色默认值是tranparent（透明）

背景图片

background-image属性描述了元素的背景图像。
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

背景平铺

使用bakeground-repeat属性，可以对html上背景图像进行平铺

背景图片位置

利用background-position属性可以改变图片在背景中的位置。

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精准单位。

例子：

注意：
参数是方位名词
1、如果指定的俩个值都说方位名词，则俩个值前后顺序无关，比如 left top 和 top left 效果一致
2、如果指定了一个方位名词，另外一个省略，则第二个值默认居中对齐

参数是精确单位
1、如果参数值是精准坐标，那么第一个肯定是x坐标，第二个一定是y坐标
2、如果只指定一个数值，那该数值一定是x坐标，另一个默认是垂直居中

参数是混合单位
1、如果指定的俩个值是精准单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标

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

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动效果

背景复合写法

当使用简写属性时，没有特定的书写顺序，一般习惯为：
background：背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置；

背景色半透明

css3为我们提供了背景颜色半透明效果

注意：
1、最后一个参数是alpha透明度，取值范围在0~1之前
2、我们习惯把0.3的0省略掉，写为background:rgba(0,0,0,.3)；
3、背景半透明是指盒子背景半透明，盒子里面的内容不受影响
4、css3新增属性，是IE9+版本浏览器才支持的

背景总结

背景图片实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置

（ps：引自pink老师~，刚刚开始作为自己的学习笔记写，如有不好请见谅，阿里嘎多）

参考学习链接。[^1]

[^1]：https://www.bilibili.com/video/BV14J4114768?p=1