CSS 背景

属性	描述	版本
background-color	背景颜色。	CSS1
background-image	背景图像。	CSS1
background-position	背景图像位置。	CSS1
background-size	背景图像的尺寸大小。	CSS3
background-repeat	背景图像如何铺排填充。	CSS1
background-origin	背景图像位置的参考原点。	CSS3
background-clip	背景图像向外裁剪的区域。	CSS3
background-attachment	背景图像是随对象内容滚动还是固定的。	CSS1
background	复合属性。设置对象的背景特性。	CSS1
background-blend-mode	定义了背景层的混合模式（图片与颜色）	CSS3

background-color

background-color 属性设置一个元素的背景颜色。

例：以下几种值都是红色背景

background-color:#ff0000;
background-color:rab(255,0,0);
background-color:rab(255,0,0,1);
background-color:hsl(360,100%,50%);
background-color:hsla(360,100%,50%,1);
background-color:red;

例：线性渐变：

background:linear-gradient(90deg,red 10px,pink 20%,green);

background:linear-gradient(to left,red 10px,pink 20%,green);

例：径向渐变：

background:linear-gradient(to left,red 10px,pink 20%,green);

background:radial-gradient(circle at center,red 10px,pink 20%,green); 

例：重复渐变

background:repeating-linear-gradient(20deg,red 5px,blue 15px);

background:repeating-radial-gradient(circle at center,red 10px,pink 20%);

background-image

background-image 属性设置一个元素的背景图像。元素的背景是元素的总大小，包括边框和内边距（但不包括外边距）。默认情况下，background-image 放置在元素的左上角，并在垂直和水平方向平铺。

值	描述
url('URL')	图像的URL
none	默认。无图像
linear-gradient()	创建一个线性渐变的"图像"
radial-gradient()	创建一个径向渐变 “图像”
repeating-linear-gradient()	创建重复的线性渐变 “图像”
repeating-radial-gradient()	创建重复的径向渐变 “图像”

background-color:#cccccc;  /*备用背景色*/

background-image:url(logo.png);
background-image: linear-gradient(90deg,red,pink,green);
background-image: radial-gradient(circle at center,red 10px,green);
background-image: repeating-radial-gradient(circle at center,red 10px,pink 20%);

background-position

background-position属性设置背景图像的起始位置。

值	描述
方位	可能的组合值： left top left center left bottom right top right center right bottom center top center center center bottom 如果仅指定一个关键字，其他值将会是 center。
x% y%	百分比值坐标。左上角是0％ 0％(默认值)。右下角是100％ 100％。 如果仅指定了一个值，另一个值默认是50％。
xpx ypx	数值单位坐标。左上角是0 0(默认值)。单位可以是像素或任何其他 CSS单位。 如果仅指定了一个值，其他值将是50％。

background-position:center;       /*图片位于正中*/
background-position:left top;     /*图片位于左上角*/
background-position:center top;   /*图片位于顶部中间*/
background-position:center 10px;  /*距离顶部10px,水平居中*/
background-position:left 50%;     /*图片位于左侧，距离顶部50%*/
background-position:-100px 0px;   /*图片超出左边100px*/

background-size

background-size 属性指定背景图片大小。

值	描述
length	数值确定宽高，如果只给出一个值，第二个默认为"auto(自动)"
%	百分比确定宽高，如果只给出一个值，第二个默认为"auto(自动)"
cover	背景定位区域内等比拉伸，两边（宽高）都填满。
contain	背景定位区域内等比拉伸，一边填满为止。

background-size:cover;        /*等比拉伸，宽高都填满*/
background-size:contain;      /*等比拉伸，一边填满*/
background-size:200px 300px;  /*宽 200px,高 300px */
background-size:200px;        /*宽 200px,高 auto */
background-size:200px 80%;    /*宽 200px,高 80% */
background-size:auto 50%;     /*宽 auto,高 50% */

background-repeat

background-image 属性设置背景图如何平铺。

值	描述
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	背景图不会重复

background-repeat:repeat;        /*平铺，默认*/ 
background-repeat:no-repeat;     /*不平铺*/
background-repeat:repeat-x;      /*只在x轴平铺*/
background-repeat:repeat-y;      /*只在y轴平铺*/

background-Origin

background-Origin属性指定 background-position 属性应该是相对位置。

值	描述
padding-box	默认值, 背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

background-origin:border-box;    /*背景图从边框开始*/
background-origin:padding-box;   /*背景图从内边距开始*/            
background-origin:content-box;   /*背景图从内容处开始*/

background-clip

background-clip 属性指定背景绘制区域。

值	描述
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

background-clip:padding-box;     /*背景从内边距开始绘制 */         
background-clip:border-box;      /*背景从边框开始绘制*/
background-clip:content-box;     /*背景从内容处开始绘制*/

background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	背景图片随着页面的滚动而滚动，默认值。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。

background-attachment:scroll;    /*图片随滚动条滚动，默认*/  
background-attachment:fixed;     /*图片不滚动*/
background-attachment:local;     /*图片随元素滚动 */ 

background

background 是背景缩写属性，可以在一个声明中设置所有的背景属性。

完整的写法：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;

background: #eee url(bg.png) center/cover no-repeat border-box content-box fixed; 

可以省略任意一项或多项：

background: #ccc url(a.png) center top/cover no-repeat;
background: #ccc url(a.png) center top/90% 200px no-repeat;
background: #ccc url(a.png) 20px 20px/90% 200px no-repeat;
background:url(a.png) center/cover;
background:url(a.png) center no-repeat;
background:url(a.png) center;
background:url(a.png) no-repeat;

多背景图设置：

/*示例方式1：*/
background-image:url("a.png"),url("b.png"),url("c.png");
background-repeat:no-repeat,repeat-x,repeat-y;
background-position:left top,right top,center;


/*示例方式2：*/
background:url("a.png") no-repeat left top,
           url("b.png") repeat-x right top,
           url("c.png") repeat-y center;
}

background-blend-mode

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）

值	描述
normal	默认值。设置正常的混合模式。
multiply	正片叠底模式。
screen	滤色模式。
overlay	叠加模式。
darken	变暗模式。
lighten	变亮模式。
color-dodge	颜色减淡模式。
saturation	饱和度模式。
color	颜色模式。
luminosity	亮度模式。

<style>
  div{
    height: 50px;
    width: 350px;
    text-align: right;
    margin: 5px;
    border:1px solid #ccc;
    background-size: 100px 50px,auto;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, #000, white), url(log.jpg);
  }
  .div1{ background-blend-mode: normal; }
  .div2{ background-blend-mode: multiply; }
  .div3{ background-blend-mode: screen; }
  .div4{ background-blend-mode: overlay; }
  .div5{ background-blend-mode: darken; }
  .div6{ background-blend-mode: lighten; }
  .div7{ background-blend-mode: color-dodge; }
  .div8{ background-blend-mode: saturation; }
  .div9{ background-blend-mode: color; }
  .div10{ background-blend-mode: luminosity; }
</style>

<div class="div1">normal</div>
<div class="div2">multiply</div>
<div class="div3">screen</div>
<div class="div4">overlay</div>
<div class="div5">darken</div>
<div class="div6">lighten</div>
<div class="div7">color-dodge</div>
<div class="div8">saturation</div>
<div class="div9">color</div>
<div class="div10">luminosity</div>

显示结果: