background背景

当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。

一旦html标签含有背景色，则body的背景色变成了正常的body标签自己的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

HTML的高度是由内容来决定的当内容较少时背景图片不能铺满整个浏览器内容过多是背景图片会被拉长

要想背景图片自适应浏览器大小只需将HTML宽度高度设为100%就可以铺满整个页面不会被拉长和缩短

        html {
            height: 100%;
            background: url(./images/dog.png) no-repeat center/100% 100%;
        }

html100%高度是浏览器的页面的高度，当 页面由滚动条时，拉动上下滚动条后背景图片也随之拉上去

所以这时候可以设置background-attachment属性，值为

fixed：背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

scroll（默认）：背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

local：背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。

scroll和local的区别为 scroll相对于元素固定，而local是相对于元素内容固定。

background：；是各种属性的简写：

 比如background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，background-attachment。

 background-position：背景图片的位置

background-position： top;	挨着顶部水平居中
background-position： top left;	挨着左上角
background-position： top 100px left;	挨着左边距离顶部100px
background-position： 25%;	距离左边25%的距离垂直居中
background-position： 25% 75%;	距离左边25%距离顶部75%

background-size只能紧接着bockground-podition出现，以"/"分割，如： "center/80%".

background-size: cover;完全覆盖盒子可能有一部分图片显示不全，contain 可能有部分空白区域

background-origin：

 注意：当使用 background-attachment为fixed时图片从边框开始且background-origin该属性将被忽略不起作用。  background-attachment不为fixed时还是默认从内边距开始且background-origin起作用

属性值：

 border-box ，为从边框开始

content-box， 从内容区开始

 padding-box ，从内边距开始（默认）

 

background-clip：

border-box；裁剪掉除边框内的背景

padding-box；裁剪掉除内边距内的背景

content-box；裁剪掉除内容内的背景

text ；裁剪掉除文字内的背景。文字设置成透明。