国家一些重要的公祭日,通常很多网站的色系都会整体变成灰色调,那是怎么实现的?其实很简单,在body上整体加一段样式即可。
完整css代码如下
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1)
filter介绍
css3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。
主要效果介绍:
广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com
- blur(px) 模糊,默认0px,值越大越模糊
- brightness(%) 更亮或更暗,如果值是0%(全黑),值是100%(无变化),>100%(更亮)
- contrast(%) 对比度,值是0%(全黑),值是100%(无不变),>100%(更低的对比)
- grayscale(%) 灰度,值为100%(转为灰度图像),值为0%(无变化),值在0%到100%之间
- opacity(%) 透明度,值为0%(完全透明),值为100%(无变化),与opacity属性类似
- sepia(%) 褐色,取值0%-100%
- invert(%) 反转颜色,取值0%-100%
- drop-shadow(h-shadow v-shadow blur spread color) 设置阴影,该函数与box-shadow属性很相似,不同之处在于,通过滤镜一些浏览器为了更好的性能会提供硬件加速