CSS3图片过滤器
<style>
.a{
/* blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； */
filter: blur(8px)
}
.b{
/*brightness(%)亮度 使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。可以大于100%更亮 */
filter:brightness(45%)
}
.c{
/* contrast(800%) 对比度值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100% */
filter: contrast(800%)
}
.d{
/* 颜色饱和度 */
filter: saturate(700%)
}
.e{
/* 透明度 */
filter: opacity(50%)
}
.f{
/* 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化 grayscale(%)灰度图像。*/
filter: sepia(50%)
}
.g{
/* 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 */
filter: hue-rotate(560deg)
}
</style>
</head>
<body>
<img src="./img/bgc.jpg" alt="" class="a">
<img src="./img/bgc.jpg" alt="" class="b">
<img src="./img/bgc.jpg" alt="" class="c">
<img src="./img/bgc.jpg" alt="" class="d">
<img src="./img/bgc.jpg" alt="" class="e">
<img src="./img/bgc.jpg" alt="" class="f">
<img src="./img/bgc.jpg" alt="" class="g">
<img src="./img/bgc.jpg" alt="" class="h">
</body>
后续还有很多渲染图片技巧 努力学习
