HTML-CSS（八）背景样式的使用

对于背景样式样式的设置，首先有个小细节需要注意的

元素宽高百分比

元素宽高的百分比，是相对父元素而言的，若父元素高度为0，则子元素高度即使设置100%，大小也是0，html元素是相对于浏览器窗口而言的，默认情况下html高度为0，宽度100%，如果要是实现body沾满整个屏幕则需要同时设置html，body的高度为100%

上图这个有个清除滚动条的操作，其实，在本案例中就算没有margin:0滚动条没有出现，因为在本例中，高度始终只是浏览器窗口的高度。如果高度自行设置超过了窗口的高度，比如2000px那么就会出现滚动条，此时margin：0就可以清楚滚动条了。清楚的原理是设置了外边距为0，那么超不出的分，无法获取实际高度，这样就形成无滚动条想象。

背景样式使用

属性

background-image: url(地址);添加背景图 默认情况背景图平铺
background-repeat: repeat/no-repeat/repeat-x/repeat-y;默认平铺整个元素/不进行平铺/x轴平铺/y轴平铺
background-position:center/left/right bottom/top/center; 相对于父级定位,也可以自定义位置对应background-position:x(px、%)（左右） y（px、%）（上下）。当x，y为正数时，这是往右、往下移动。当x、y为负数时，这是往上、往左移动

background-attachment：scroll/fixed /…;背景图随滚动条的移动方式.scroll随窗口的滚动条而滚动（背景位置是按照当前元素进行便宜的），fixed不跟随窗口的滚动条而滚动（背景位置是按照浏览器进行偏移的。采用scroll属性值的话，一旦窗口全部都不在浏览器窗口内时，背景图也就跟着消失了。采用fixed的话，背景图的的消失有点不一样，下文有详细说明

background-position与background-attachment关系

再上图看可以看到，背景图消失了，但其实并不是背景图小时了，只是背景图不在元素窗口的内部。可以看下面这张图

背景图因为background-attachment:fixed设置，所以定位就以浏览器窗口为主了，如果背景窗口过小，也就造成了背景图脱离了背景窗口，这样背景图就消失了。（脱离背景窗口的背景图，是没有意义的，本来背景图就只是放在元素内作为背景装饰的，脱离了就没有存在的意义了）。如果想改变这种情况有两种方法。

将元素的背景窗口调大

background-position定位距离调小

因为使用 background-attachment:fixed是以浏览器窗口为主的，定位过大了，也就脱离了背景窗口。适当的将backgroun-position:x(px、%) y(px、%) 的x，y值调小即可