做完项目，对css样式有新发现新感悟

1.背景图片做自适应（简单呦）

div{

background:url('') no-repeat;

background-size:100%,100%;

}

2.滤镜 filter  定义了元素的可是效果（通常是<img>,背景图片也可以）

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示：使用空格分隔多个滤镜。
img{
-webkit-filter:blur(5px);/*chrome,Safari,Opera*/
filter:blur(5px);
}
使用讲解：
a.图片高斯模糊效果：blur(5px);
b.图片变亮：brightness(200%);
c.调整图像的对比度：contrast(200%);
d.给图像设置一个阴影效果：drop-shadow(8px 8px 10px red);
e.将图像转换为灰度图像：grayscale(50%);
f.给图像应用色相旋转：hue-rotate(90deg);
g.反向输入图像：invert(100%);
h.转化图像的透明程度：opacity(30%);
r.转化图像的饱和度：saturate(800%);
j.将图像转化为深褐色：sepia(100%);
k.复合函数--使用多个滤镜，每个滤镜使用空格分隔。注意顺序
img{
-webkit-filter:contrast(200%) brightness(150%);
filter:contrast(200%) brightness(150%);
}