css 背景和渐变

css 背景和渐变

background 背景

所有背景属性都不能继承

在CSS2.1里，background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position

CSS3开始，又增加了3个新的属性值
注意：反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size

background: [background-color] 
            [background-image] 
            [background-repeat]
            [background-attachment] 
            [background-position] / [ background-size]
            [background-origin] 
            [background-clip];

• background-color 背景色
  不能继承，其默认值是 transparent

• background-image 背景图片
  默认值是 none

可设置多幅背景图片 background-image:url(bg_flower.gif),url(bg_flower_2.gif);

• background-repeat 背景图片平铺
  其值可为 （ repeat | no-repeat | repeat-x | repeat-y ）

默认为repeat

• background-attachment 背景关联

  • 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

  • 其值可为 （ fixed | scroll ）

  • 默认值是 scroll，背景会随文档滚动

  • 可以声明图像相对于可视区是固定的（fixed）

• background-position 背景定位

  • 不超过两个关键字，水平方向和垂直方向

  • 只出现一个关键字，另一个认为是center

  • 其值可为 （ top，bottom，left，right，center，长度值，百分数值 ）

  • 默认为 0% 0%，即top left ，元素内边距区的左上角(padding-box)

• background-size 背景图像尺寸

  • 默认值auto，宽度和高度，只有一个值，第二个被设置为auto

  • 其值可为 （ 长度值，百分数值，cover ，contain ）

    • cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

    • contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

• background-origin 定位中心点

  • 注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果

  • 默认值 padding-box

  • 其值可为 （ padding-box | border-box | content-box ）

• background-clip 背景的绘制区域

  • 默认值 border-box ，背景被裁剪到边框盒

  • 其值可为 （ border-box | padding-box | content-box ）

背景定位

• background-position 扩展语法

  > 允许我们指定背景图片`距离任意角的偏移量`,`在偏移量前面指定关键字`
  

  background-position: right 20px bottom 10px;

需要提供一个合适的回退方案,在不支持 background-position 扩展语法的浏览器中,背景图片会紧 贴在左上角(背景图片的默认位置)

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

• background-origin

  • 问题：偏移量与容器的内边距一致

  • 默认情况下,background-position 是以 padding box 为准的

  • 如果把background-origin值改成 content-box,则在 background-position 属 性中使用的边角关键字将会以内容区的边缘作为基准(也就是说,此时背景 图片距离边角的偏移量就跟内边距保持一致了)

  padding: 10px;
  background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ 
  background-origin: content-box;

• calc()

  background: url("code-pirate.svg") no-repeat; 
  background-position: calc(100% - 20px) calc(100% - 10px);

伪随机背景

重复平铺的图案有一定规律可循，如下面代码

background: linear-gradient(90deg,
                            #fb3 15%, #655 0, 
                            #655 40%,#ab4 0, 
                            #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;

每80px（即 background-size 的值）重复一次

方法：

• 把平铺间距最大的贴片安排在最顶层
  仍然可以看出图案每隔 240px 就会重复一次,

贴片（多层渐变合成的最终图案中可感知的重复单元）的尺寸实际上就是所有 background-size 的最小公倍数

background: hsl(20, 40%, 90%);
background-image:
 linear-gradient(90deg, #fb3 10px, transparent 0),
 linear-gradient(90deg, #ab4 20px, transparent 0),
 linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

• 把贴片的尺寸最大化
  “蝉原则”：数字最好是“相对质数”，在这种情况下，它们的最小公倍数就是它们的乘积

要达成相对质数，最简单的办法就是尽量选择质数，因为质数跟其他任意数字都是相对质数

gradient 渐变

• linear-gradient 线性渐变

语法 ： background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法,必须放最后 */

+ direction/angle 方向或角度
    - direction 使用方向
        + 预定义方向 left,top等
        + 可为起始方向 (left 从左到右 ) | (left,top 对角)
        + 可定义到达方向 - 使用 to 表示 (to right) | (to right bottom ) 
    - angle 使用角度
        * 角度是指水平线和渐变线之间的角度，逆时针方向计算
        * 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变
        ![角度 对应 方向](http://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg)
+ 至少定义两种颜色结点(起点色，中止色)
    - 设置透明度可为 rgba() 
    - 可指定起止色位置，百分比或长度值 
        + (red 30%,blue 50%) ，则30%-50%间是两种颜色的渐变，其余部分为实色
        + 如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

background: linear-gradient(#fb3 33.3%, #58a 0, 
                            #58a 66.6%, yellowgreen 0);

等同于：

background: linear-gradient(#fb3 33.3%, #58a 33.3%, 
                            #58a 66.6%, yellowgreen 66.6%);

• repeating-linear-gradient 重复的线性渐变

  • 适用于斜向条纹

  • 为这些长度是直接在渐变轴上进行度量的，直接代表了条纹自身的宽度

  • 不论条纹角度如何，在创建双色条纹时都需要四个色标

    background: linear-gradient(45deg,
                                #fb3 25%, #58a 0, 
                                #58a 50%,#fb3 0, 
                                #fb3 75%, #58a 0);
    background-size: 42.426406871px 42.426406871px;
    
    等同于：
    
    background: repeating-linear-gradient(45deg,
                                          #fb3, #fb3 15px, 
                                          #58a 0, #58a 30px);

  • 同色系条纹（明亮度有差异）

    主色调和浅色变体组成
    方法是：把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹
    修改时，只需改动背景色
    
    background: #58a;
    background-image: repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,
    transparent 0, transparent 30px);

• radial-gradient 径向渐变

语法：background: radial-gradient(position, shape size, start-color, ..., last-color);

• repeating-radial-gradient 重复的径向渐变

  background-image: repeating-radial-gradient(red,green 40px, orange 80px);