CSS阶段二：背景，渐变

样式继承

像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的

单位

长度单位

像素px

在PC端使用，移动端谨慎使用

百分比%

避免嵌套使用, 基于父元素。

em

em会相对于当前元素的字体大小来计算

1em = 1font-size

em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变

避免嵌套使用，基于自身字体的大小。

rem

基于html元素字体大小。注意Chrome不支持12px以下像素。

颜色单位

颜色单位：

             *   在CSS可以直接使用颜色的单词来表示不同的颜色
             *      红色：red
             *      蓝色：blue
             *      绿色：green    
             *   也可以使用RGB值来表示不同的颜色
             *      - 所谓的RGB值指的是通过Red Green Blue三元色，
             *          通过这三种颜色的不同的浓度，来表示出不同的颜色
             *      - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
             *          - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
             *          - 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
             *              使用百分数最终也会转换为0-255之间的数
             *              0%表示0
             *              100%表示255
             *   也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
             *      只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
             *      每组表示一个颜色    ,第一组表示红色的浓度，范围00-ff
             *                  第二组表示绿色的浓度，范围是00-ff
             *                  第三组表示蓝色的浓度，范围00-ff
             *      语法：#红色绿色蓝色
             *      十六进制：
             *      0 1 2 3 4 5 6 7 8 9 a b c d e f
             *      00 - ff
             *      00表示没有，相当于rgb中的0
             *      ff表示最大，相当于rgb中255
             *      红色：
             *          #ff0000
             *      像这种两位两位重复的颜色，可以简写
             *          比如：#ff0000 可以写成 #f00
             *          #abc  #aabbcc       
             *          
             */
            background-color: rgb(161,187,215);
            
            background-color: rgb(100%,50%,50%);
            
            background-color: #00f;
            
            background-color: #abc;
            
            background-color: #084098;

背景

background-color

background-image

需要url地址作为参数

网页加载完或者和网页一同加载，不影响网页加载速度

不重要的图片使用background-image

background-image: url(img/dahuangmao-04.png); 

雪碧图

减少图片请求次数

多个图标在一个图上

background-repeat

设置背景图片重复方式

可选值

• repeat（背景图片沿x轴和y轴重复）
• no-repeat（不重复）
• repeat-x（沿水平方向重复）
• repeat-y

background-position

设置背景图片位置

设置方式一

可以通过两个位置关键词来设置

如果仅仅指定一个值，则第二个值默认是center

    body{
            background-image: url(img/dahuangmao-04.png); 
            background-repeat: no-repeat;
            background-position: top center;
        }

设置方式二

可以直接指定两个值来设置背景图片偏移量

    body{
            background-image: url(img/dahuangmao-04.png); 
            background-repeat: no-repeat;
            background-position:100px 100px;
        }

background-attachment

设置背景是否随页面滚动

可选值

• scroll
• fixed（背景图片不随页面滚动，这种背景一般设置给body）

background-origin

设置背景原点（背景的左上角）边框对齐位置

可选值：

• border-box; （border，padding，content区域都设置背景）
• padding-box;（padding，content区域都设置背景）
• content-box;（content区域设置背景）

background-clip

背景剪裁（背景图片只显示出剪裁范围内的图片）
可选值：

• border-box;（只有边框显示背景）
• padding-box;（只有padding区显示背景）
• content-box;（只有内容区显示背景）

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

注意：只有 webkit /blink内核浏览器实现的使用图片填充文本的效果

该样式在移动端使用较多

background-size

背景大小

如果只设置与一个值，代表背景的宽度，第二个至会按照图片原比例进行缩放

参数：

• n 指定背景图宽高

    background-size: 200px 200px;
  

• 百分比（百分比是相对于背景图所在元素的宽度计算）

    background-size: 50% 50%;
  

• cover（基于元素最大的边计算背景图的大小）

    background-size: cover;
  

• contain（基于元素最小的边计算背景图的大小）

渐变函数

linear-gradient()

线性渐变

参数1：

渐变方向

• to right -- 从左向右
• to top -- 从下到上
• to left -- 从右到左
• to bottom --- 从上到下（默认值）
• to left top --- 从右下到左上
• 角度---正值 顺时针

参数2~n：渐变颜色 渐变起始位置

background-image: linear-gradient(to right, red, yellow, blue, green);

/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green); 

/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);      

：repeating-linear-gradient

重复线性渐变（设置好渐变之后会一直重复铺满真个盒子）

background-image: repeating-linear-gradient(
                to right
                , red 0
                , red 50px
                , yellow 50px
                , yellow 100px
        );

radial-gradient()

径向渐变

参数1 ： 渐变形状 X渐变半径 Y渐变半径 at 渐变圆心X坐标 渐变圆心Y坐标

ellipse 50px 100px at 100px 50px, 

• circle - 圆形的渐变形状

• ellipse - 椭圆的渐变效果（默认值）

参数2~n ： 渐变颜色 渐变起始位置

background-image: radial-gradient(circle, red, blue);

background-image: radial-gradient(ellipse at 50px 50px, red, blue);

background-image: radial-gradient(ellipse at top, red, blue);
        
background-image: radial-gradient(ellipse at 50% 0, red, blue);

repeating-radial-gradient

重复径向渐变

background-image: repeating-radial-gradient(circle,
 red 0, red 10px, yellow 10px, yellow 20px, blue 20px, blue 30px) ;