本文将介绍如何将多样化的css3属性设置一幅属于你自己的独一无二的背景图片
利用css进行背景图片设置时，发现可提供的属性也就那么几个，而大量的css3属性又不能直接使用在背景图片上，其中主要就是filter滤镜中强大的对图片的装饰方法，所以今天就和大家分享如何对背景图片进行独一无二的装点
阶段一: 单纯使用css3修饰图片
html:
<body>
<div id="decoration"></div>
</body>css:
*{
margin: 0
}
body.html{
height: 100%
}
#decoration {
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-image: url('../ima.jpg');
filter: brightness(.7);
//more
}注: 其中第一项的height：100%是必须的
原理就是使用fixed将一张图片放入一个块元素里，再调整大小使其大小适应body成为'真正的background'，此时图片会完全覆盖整个页面，且不会产生滚动(scroll)，之后，就可以使用css3属性修改图片了
阶段二: 利用js动态更改图片样式
javascript:
window.onscroll = function(){
if(window.pageXOffset > 0) {
var opa = (window.pageXOffset / 80);
document.getElementById('#decoration').style.opacity = 1-kk;
}
}此方法可以实现滚轮滚动时，动态改变图片的透明度，配合文字及其他样式显示，效果相当不错
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。