html灰色的代码,html蓝色代码怎么用

今日头条

慕课网：

慕课网

给大家总结出一段规范的代码，把这段代码加入网站页面的CSS里面即可实现页面变成灰色的效果：

规范代码

filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和Safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);

一、blur(px)高斯模糊

给图像高斯模糊。如果没有设定值，则默认值是0；这个参数可设置css长度值，不接受百分比值

img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); }

二、brightness(%)亮度

使图像看起来更亮或更暗。值是100%，图像无变化，超过100%，变亮，小于100%，变暗。

filter: brightness(150%)

三、contrast(%)对比度

filter: contrast(200%)

四、drop-shadow(x y blur speed color) 阴影效果

filter-shadow: (50px 50px 5px tomato)

与box-shadow效果上有显著的区别

五、grayscale(%)灰度

filter: grayscale(100%)

六、hue-rotate()色相旋转

filter: hue-rotate(100%)

七、invate(%)

反转输入图像。值为100%是完全反转。 值为0%则图像无变化。0%~100%之间，则是效果的线性乘子。

filter: invate(100%)

八、opacity(%)

转化图像的透明度。值为0%则是完全透明。值为100%则图像无变化

filter: opacity(100%)

九、saturate(%)

转换图像的饱和度。值为0%则是完全不饱和，值为100%则图像无变化。值允许大于100%，会有更高的饱和度。

filter: saturate(100%)

十、sepia(%)

将图像转为深褐色。值为100%则完全是深褐色

img { -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ filter: sepia(100%); }

十一、复合函数

使用多个滤镜，每个滤镜使用空格分割。

注意：顺序是非常重要的（例如使用grayscale()再使用sepia()将产生一个完整的灰度图片）

img { -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%); }filter效果示例：

.blur {-webkit-filter: blur(4px);filter: blur(4px);} .brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);} .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);} .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} .invert {-webkit-filter: invert(100%);filter: invert(100%);} .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);} .saturate {-webkit-filter: saturate(7); filter: saturate(7);} .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);} .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

filter效果示例