背景图填充，背景模糊及简易蒙版的实现

    开篇语，之前做demo有问题，随手百度，竟然发现多篇文章出奇的相同，错误的地方也是让人发指的一致，不由得感叹，天下文章一大抄，这不太可怕，可怕的是，当假的错的东西多了，劣币驱逐良币的时代就不远了，可叹可叹！！

    长话短说。要做的样式如下图。

其实，这个图片可以设在父容器header中，但是还需要背景有一定的模糊和透明度，所有，建议将背景另设一个块容器background，此容器作为父容器header的子容器，同时作为内容或者标题容器title的兄弟容器.

父容器header中的样式width,height, margin应该都可以理解的。

title容器里的margin , text-align也是可以理解的。

那我们就从background 中的样式一一说起吧！

由于background是个块元素，按照正常文档流应该是和title容器上下排列开，这样会导致title部分没有背景图。如下图所示。

所以我们要打破这个正常的文档流，使这个background容器块元素能覆盖或者占据父容器header。我们就使用到了，position: absolute，使background容器块元素脱离原文档流。

那我们就给background元素加上这个属性

.header .background {
    background-image : url('yyy.jpg');
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height :100%;
    }

关于在这里设置width,height，因为这是个块元素，默认有这两个属性。我们为了背景能填充父容器，所有把这两个属性都设置成100%，这样就能继承父元素的宽高了(此处继承的是，子元素块的内容部分的宽高继承了父容器元素块的宽高，这样说更确切一些吧)。

我们来看看效果如何吧

哎，似乎有些不对了。

背景图片填充了整个body区域，而且背景图片有重叠。

这是由于我们设置的position : absolute 属性导致的。

由于父容器header 期初我们并没有设置absolute / relative属性，导致background块元素 以body对象为定位，以浏览器窗口的宽高 为自身内容的宽高，但是这并不是我们想要的呀

所以，给父元素header 增加一个position：  relative ，我们看看会有什么变化

似乎好多了，此时父容器header被填充。但是图片似乎没有横向没有完全显示的。我们看下原始图片吧

背景图片似乎只是显示了如下图线框中的部分。

那么我们给子元素增加一个background-size : cover 

这样似乎好多了。

在加上 z-index= -1；使背景图片在其他元素下面，

filter : blur(2px); 进行模糊处理，

opacity : 0.8  设置一个透明度。

至此，这个小demo基本完成了。

蒙版和这个原理一直，只不过，蒙版的z-index值为正数，透明度给大一些就可以了。蒙版的话，后面我追加或者再写一篇。这里就一笔带过了。

真是越写越多，越写越心虚呀。。。。。⊙﹏⊙‖∣

暂时就这样吧