网站颜色是怎么变成灰色的了

首先打开开发者模式,按F12定位到html标签可以看到右边有几个属性:

html {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

}

在早期网页要实现图片的色相旋转、灰色度的变化，只能用ie的滤镜来实现。直到CSS3到来，就可以使用filter来实现了。

-webkit-filter支持的效果有如下:

blur 模糊
brightness 亮度
contrast 对比度
drop-shadow 阴影
grayscale 灰度
opacity 透明度
sepia 褐色
invert 反色
saturate 饱和度
hue-rotate 色相旋转

所以,如果设置灰色的话,就设置如下

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

当然如果不想用于整个网页的话,可以将这两个属性加到想要设置成灰色的标签里也是可以的如下:

img{-webkit-filter: sepia(100%);filter: sepia(100%);}

本人非专研前端,这里只做简单的介绍。文章有什么问题欢迎指出~

网站颜色是怎么变成灰色的了相关推荐

全国默哀网站首页都要变成灰色的简单解决办法
今天全国默哀网站首页都要变成灰色给大家一个简单的解决办法在首页的body中加上 style="FILTER: alphaopacity=80 gray" 大家也可以在自己的b ...
如何让网站变成黑白色或者灰色？
怎么将网站整体色调变黑白灰色?一般很庄重的事情或者影响力很大的伟人逝世.纪念日的时候,站长会把网站全部网页设置为灰色或者黑白色,以表示对逝者的悼念,本篇整理了四种可以实现网页变成灰色的代码,一起看看吧 ...
如何把我们的网站变成黑白色或是灰色
第一种:修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰.(如果是小白站长们,可以把这段代码和到百度统计放在一起,放之前一定要记得换行隔开) CSS代 ...
html颜色自定义器,Color Changer插件，谷歌浏览器夜间模式，网站颜色自定义更改工具...
Color Changer插件,是一款非常适合设计师以及普通用户使用的网站颜色自定义更换工具,它提供了一个强大的调色板,能让我们对谷歌浏览器中的任意网站修改背景色.链接颜色.文本字样颜色. Chang ...
input框中颜色color修改了但是字体颜色一直是默认灰色
输入框里面的颜色一直默认为灰色.加了颜色color,权重最高但是颜色还是默认灰色. 这是由于谷歌浏览器的自带样式的缘故.在样式中加个-webkit-text-fill-color: #1576DC;/ ...
为了悼念XXX，前端网站首页设置为黑白灰色的方法
项目场景: 为了悼念XXX重要人物,需要将网站首页设置为黑白灰色. 解决方案: CSS修改样式便可: body {/* 丧版样式 */-webkit-filter: grayscale(100%);- ...
怎么把php网站变灰,让自己的网站的全部网页变成灰色（黑白色）
让自己的网站的全部网页变成灰色(黑白色) 第一种:修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰 CSS代码 html { filter: prog ...
网站颜色配色方案笔记
颜色的使用在网页制作中起着非常关键的作用,有很多网站以其成功的色彩搭配令人过目不忘.但是对于刚开始学习制作网页的人来说,往往不容易驾驭好网页的颜色搭配.除了学习各种色彩理论和方法之外,笔者认为多学习一 ...
网站颜色搭配的好网站。
为什么80%的码农都做不了架构师?>>> http://webcolourdata.com/ 以后选色可以上这个网站看看. 转载于:https://my.oschina.net ...

网站颜色是怎么变成灰色的了

网站颜色是怎么变成灰色的了相关推荐

最新文章

热门文章