CSS3 设置网页黑白

今天是清明节，整个CSDN都换上来黑白的装束。

对于一些需要悼念的日子，一般在全国哀悼日，清明节，以及一些影响力很大的伟人逝世或纪念日，还有其他特殊原因（比如汶川大地震），身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。

在CSDN黑白的网页上右击，审查元素，找到 html 标签的样式表。

会发现，将网页变为黑白，仅仅使用了几行代码，借助滤镜的效果对页面进行了整体处理。如下

这就是 CSDN 实现全栈黑白的原理

<style>
html {-webkit-filter : grayscale(100%);-moz-filter : grayscale(100%);-ms-filter : grayscale(100%);-o-filter : grayscale(100%);filter : grayscle(100%);filter ：progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>

grayscale(%) 将图像转换为灰度图像。值定义为转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

CSS3 设置网页黑白相关推荐

使用CSS3设置条纹背景
系列文章目录 CSS3实现半透明边框(1) CSS3实现多重边框(2) CSS3如何调整背景图片大小(3) CSS3背景定位(4) 使用CSS3设置条纹背景系列文章目录前言一.水平条纹不等宽的 ...
用CSS实现设置网页文字为只读，不可复制的方法
设置网页文字不可复制的方法,除了我们知道的用JS实现外,还可以用css实现. JS实现网页复制监听请做电梯在css中,可以给body元素设置"user-select:none;" ...
使用CSS3制作网页动态效果入门
用css3做网页动态效果,主要涉及3个属性: transition 使元素的某些属性从一个状态到另一个状态时产生平滑的过渡 animation 使元素产生动画效果 transform 使元素产生旋转. ...
CSS3艺术:网页设计案例实战之angular实现一、数据准备
<CSS3艺术:网页设计案例实战>的目录,按照章节,进行二级数据组织,以便于导航. 1.在src/app文件夹下,建立model文件夹 2.在model文件夹中,建立section.mod ...
python做花瓣飘落的背景_JavaScript_jquery+css3实现网页背景花瓣随机飘落特效，飘花效果的实现——效果图： - phpStudy...
jquery+css3实现网页背景花瓣随机飘落特效飘花效果的实现--效果图: 查看演示源码下载需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jq ...
html无法选择复制,javascript如何设置网页无法复制？
javascript设置网页无法复制的方法:在JavaScript代码中设置禁用右键菜单.复制.选择等操作,禁用Ctrl+c和Ctrl+v快捷键的使用,通过这种方法就可以实现网页无法复制. JavaS ...
跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程编辑锁定讨论上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
网页去色变黑白+网页黑白恢复为彩色
前言特定节日,你会发现网页和app首页都会变成灰色,以此来表达我们的哀思之情. 好奇宝宝想知道各个网站都是使用哪些小技巧来做出这种效果的(由彩变灰,由灰变彩),于是稍微学习了一下- 由灰变彩稍微想 ...
怎样设置网页纵向滚动 css,CSS 怎么设置网页下拉条 (滚动条) 样式?
CSS 怎么设置网页下拉条 (滚动条) 样式? 很多朋友在网页设计中要自定义下拉条 (滚动条) 样式的情景, 下拉条的样式我们可以通过 CSS 来控制的, 下拉条能不能换颜色或者做的更好看一些呢? 那 ...
设置网页右键点击，并阻止右键点击默认事件
设置网页右键点击,并阻止右键点击默认事件 //为当前文档添加鼠标右击事件,防止默认的右击菜单弹出 document.oncontextmenu=Youji; function Youji(){aler ...

CSS3 设置网页黑白

CSS3 设置网页黑白相关推荐

最新文章

热门文章