认识CSS之背景

所属专栏：前端只因变凤凰之路
作者简介：rchjr——五带信管菜只因一枚
前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
文章简介：本文介绍CSS背景相关知识。知识学习内容来自b站的 @黑马程序员 的视频

1 背景颜色

background-color属性定义了元素的背景颜色。一般情况下背景颜色默认是transparent（透明的），我们也可以手动指定背景颜色为透明的。

    
    
    
    
    



    

        我是背景颜色
    

2 背景图片

background-image属性描述了元素的背景图片。实际开发常见与logo、小的装饰性图片、超大背景图片。优点在于非常便于控制位置。

上述就是设置背景图片后的效果，但是我们发现图片重复了，这时候就需要让图片平铺。

3 背景平铺

背景平铺就是让图片重复填满元素，而且默认的都是平铺。

background-repeat：有四个属性，可以选择平铺或者不平铺；可以选择在横向或者纵向平铺

不平铺

横向平铺

当然，背景颜色与背景图片可以重复的，只要背景图片没有填充完，背景颜色就会显示

背景图片的位置控制

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

background-position：x，y。其中x，y分别是横纵坐标。可以使用方位名词（top、bottom、center、left、right）也可以使用精确的单位（px）来进行设置。

规则（重要）

1. 属性值为方位名词

• x，y都为方位名词，则书写的前后顺序无关。如top center和center top是一样的

• 如果只有一个方位名词，则另一个默认居中对齐（如只写一个left）

应用案例1-设置小的logo

    
    
    
    
    


    

        成长守护平台
    

应用案例2-设置大的背景图片

可以显示主要部分

方法一般就是center top

2. 属性值为精确单位

如果参数是精确坐标，那么第一个一定是x坐标，第二个一定是y坐标。

如果只写了一个值，那么第一个一定是x坐标，另一个默认垂直居中。

如果一个值在前面，方位名词在后面，那么第一个是x坐标，另一个垂直居中

如果方位名词在前，值在后则方位名词是x，值对应y

4 综合案例-五彩导航栏

就是实现在div中放置盒子，然后设置背景图片，并加上链接伪类选择器，实现点击不同的盒子实现不同的图片呈现。

    
    
    
    
    


    五彩导航
    五彩导航

（没找合适的图片，凑合着看吧~）