@(HTML5)[背景]

[TOC]

三、CSS3背景

CSS背景属性回顾

背景单个属性

• background-image
• background-color
• background-repeat
• background-position
• background-attachment
  背景符合属性
• background
  注意：复合属性会覆盖前面的单个属性，反之则不会

背景定位的扩展

在CSS3中，背景定位得到了扩展，它允许我们指定背景图片在距离任意角的偏移量，只需要在偏移量前面指定关键字

background-position：right 20px bottom 10px;使用时单独设置。也可以使用background-origin：content-box实现

CSS3新增背景属性

背景尺寸：background-size

1. 设置背景尺寸 background-size
   background-size:x y; //水平 垂直；值可以为像素、百分比、auto等
   background-size:cover; //保持宽高比不变，保证占满盒子，但是不一定能看到全部图
   backgroundsize:contain; //保持宽高比不变，保证看清全图，但是不一定占满盒子

2. 多背景 background-image
   background-image:url(1.jpg),url(2.jpg); 多个背景以逗号隔开，无限个数

3. 背景起始区域 background-origin
   background-origin:border-box; //从border区域起始
   background-origin:padding-box; //默认值，从padding区域起始
   background-origin:content-box; //从内容部分起始

4. 背景显示区域 background-clip //从什么地方看到图片
   background-clip:border-box; //默认值，从border区域开始显示背景
   background-clip:padding-box; //从padding区域开始显示背景
   background-clip:content-box; //从内部区域开始显示背景

新增颜色与背景渐变

新增背景色

1. rgb：rgb为三原色，取值范围为0~255
2. hsl：H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360，S：Saturation(饱和度)。取值为：0.0% - 100.0%，L：Lightness(亮度)。取值为：0.0% - 100.0%。 100%纯白色
3. rgba，hsla：在上面的基础上多了一个a透明度数值，取值范围0~1，0为完全透明，1为完全不透明

渐变色

1. 线性渐变：linear-gradient()
2. 径向渐变：radial-gradient()

线性渐变很简单，这里说一下经向渐变。

//标准写法
radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
//-webkit-老版本径向渐变的写法
-webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+)

• 径向渐变方式主要由position、shape、size这三个参数影响，分别控制椭圆的圆心、形状和大小
• position：定义渐变的圆心。默认是center（X轴），center（Y轴），可以是left，right，center关键词，也可以是具体的数值，还可以是百分比。最后可以是单个值，另一个就默认是center
• shape：定义渐变的形状是圆（circle）或者是椭圆（ellipse 默认）
• size：定义渐变的大小、默认是farthest-corner。有四个值。

closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-side:半径为从圆心到最远角

注意：在使用时需要加上 –webkit-兼容前缀 IE低版本兼容filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1').