【css】background相关背景图的设置

背景图片设置

background

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background: url(images/sea.png);

background-repeat

background-repeat: no-repeat;

background-position

background-position: 50% 50%;

background-position: center; //  left right

background-origin

背景图放置的起始位置

background-origin: border-box;

background-origin: padding-box;

background-origin: content-box;

background-size

图片完全置于盒子内，图片同比例缩放
当盒子比例和图片比例不一致时 可能某个方向留白

background-size: contain;

横向铺满，纵向铺满(相对于父元素的百分比)

background-size: 100% 100%;

铺满，图片有可能变形

background-size: cover;	

background-size: 400px 400px;

background-image 渐变背景

渐变背景通过background-image属性实现。

通过使用 CSS3 渐变背景（代替图像来实现这些效果），可以减少下载的时间和宽带的使用。
此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

linear-gradient 线性渐变

background-image: linear-gradient(direction/angle, color1, color2, ... colorN);

• direction渐变方向
  默认向下，可省略
  to bottom/to top向上/to left向左/to right向右/to bottom right等对角方向
• angle 角度 顺时针，向上为0deg（注意：不同浏览器解析不同）
  默认向下，可省略
  0deg 从下到上
  90deg 从左到右
  -90deg 从右到左
  以此类推……
• color 渐变颜色，一般为两个及以上

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

linear-gradient 重复线性渐变

background-image: repeating-linear-gradient(to right,red  20px,yellow 40px,purple 60px);

示例	效果图（线性渐变）	效果图（重复线性渐变）
background-image

radial-gradient 径向渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

• shape 形状
  可省略，默认ellipse
ellipse 指定椭圆形的径向渐变。
  circle 指定圆形的径向渐变
• size 渐变的大小（一般会省略）
  可省略，默认farthest-corner
  farthest-corner (默认) 指定径向渐变的半径长度为从圆心到离圆心最远的角
  closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
  closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角
  farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边
• at position定义渐变的位置
  可省略，默认center
  at center（默认） 设置中间为径向渐变圆心的纵坐标值。
  at top 设置顶部为径向渐变圆心的纵坐标值。
  at bottom 设置底部为径向渐变圆心的纵坐标值。

// ellipse [ɪ'lɪps] 椭圆
background-image: radial-gradient(ellipse,red,orange,yellow,green,cyan,blue,purple);

// circle 正圆 
background-image: radial-gradient(circle at center bottom,red,orange,yellow,green,cyan,blue,purple);

示例	效果图（椭圆）	效果图（正圆）
background-image