网页变灰色前端是如何实现的?
本文转载 转自bilibili最爱up主–黑马程序员pink老师
今天是4.4疫情哀悼日,纪念疫情期间牺牲的烈士和逝世同胞,因此大部分网站颜色都变灰色
了,我们前端是如何实现的呢?
核心原理,使用css3的滤镜效果即可。filter grayscale将整个界面变为黑白灰色调,是CSS3新功能。
方式1:通过js可以设定指定时间, 自动变灰以及复原
注意:以下代码需要引入jquery
<script>
// 1.得到当前的时间
var nowTime = new Date0.getTime0;
// 2.设置结束的时间是2020年4月5号凌晨
var overTime = new Date("2020/04/05 00:00:00).getTime0;
// 3.如果当前时间小于了结束时间,简单说就是当前时间还没到4.5号零点
if (nowTime < overTime) {// 4.把html设置灰色滤镜
$("html")css({'-webkit- filter': 'grayscale(100%)',
'-moz-filter': 'grayscale(100%)',
'-ms-filter: 'grayscale(100%)',
'o-filter': 'grayscale(100%)',
// ie滤镜
fiter: 'progid:DXlmageTransform.Microsoft.Basiclmage(grayscale= 1)',
// ie6等低版本浏览器不需要加滤镜
' filter': 'none' });
</script>
方式2:直接使用CSS处理,但是不能设置时间
```css
<style>
html {/*滤镜效果*/
filter: grayscale(100%);
/* webkit内核*/
-webkit-filter: grayscale(100%);
/*火狐内核*/
-moz-filter: grayscale(100%);
/*微软内核*/
-ms-filter: grayscale(100%);
/*欧朋内核*/
-o-filter: grayscale(100%);
/* ie专有滤镜*/
filter: progid:DXlmage Transform.Microsoft.Basiclmage(grayscale= 1);
</style>
网页变灰色前端是如何实现的?相关推荐
- php代码显示灰色,哀悼日-实现网页变灰色的方法
哀悼日期间经常需要把网页设置为灰色状态,现总结一下方法以备后用,在网站的CSS文件中的顶部加入如下代码: html{filter:progid:DXImageTransform.Microsoft.B ...
- html 如何让网页变灰色
只在网页中加入这个样式就可以了,大家可以拿去试试 应用场景 一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色 ...
- html页面变成黑白,修改CSS样式实现网页变灰色/黑白代码的几个方法整理
今天上午有网友提到希望将网站整体的色调换成灰色.黑色色调,这个记得在以前纪念一些日子的时候会有用到,早年老蒋在自己的博客中也有使用的.记得那时候直接是修改CSS就可以实现,既然有用户需要,老蒋这里抽点 ...
- 修改CSS样式实现网页变灰色/黑白代码的几个方法整理
今天上午有网友提到希望将网站整体的色调换成灰色.黑色色调,这个记得在以前纪念一些日子的时候会有用到.记得那时候直接是修改CSS就可以实现,既然有用户需要,这里抽点时间再整理一下看看是否有其他更好的方法 ...
- 【祈福】一句话让你的网页为灾区祈福(让网页变灰色)
一句话让你的网页为灾区祈祷,将这句话加在网页底部即可. <style>html { filter:progid:DXImageTransform.Microsoft.BasicImage( ...
- 下面整理了几种让网页变灰色的CSS代码,供各位站长参考!
方法1:支持IE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 老板:你也把咱们网站弄成灰色——网站变灰色如何实现
从昨天下午开始,我们打开各种网站后都是灰色的,我们讲解一下如何用技术手段使网页变灰色. //分析:我们网站的元素大多数都是img标签和其他文字行标签,文字我们直接使用color:#ccc就可以更改,图 ...
- 使整个网页变黑白色(灰色)的特效代码
全站CSS代码. html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法:这段代码可以变网页为黑 ...
- 怎么把php网站变灰,让自己的网站的全部网页变成灰色(黑白色)
让自己的网站的全部网页变成灰色(黑白色) 第一种:修改CSS文件 我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰 CSS代码 html { filter: prog ...
最新文章
- 算法开发人员的安身之本:如何将机器学习与各行各业进行深度结合
- 1.2控制台的大体设置:
- 找不到命令报错bash:command not found解决方案
- Java中的数据结构
- 干货报告:八大科技领域,280 页,InfoQ《2020 中国技术发展白皮书》开放下载...
- AAAI 2018论文解读 | 基于置信度的知识图谱表示学习框架
- 推荐开源代码2004/12/17
- c语言统计数字字母个数,请问这个用c怎么做:输入一串字符,分别统计其中数字和字母的个数...
- css-样式的权重-圆角-rgba
- html语言amp,第二amp;三讲HTML语言.ppt
- 虚拟机启动失败/检查打开虚拟化-解决方案小结
- Chrome浏览器用IDM插件下载出现401、403、404错误
- Java集合——数据结构
- 做人做事的艺术html,低姿态做人做事的艺术简介读后感,经典语录书评
- kubernetes中Pod容器错误 init:ImagePullBackOff 解决方法
- 年轻人还记得KCP吗?什么是KCP,怎么使用呢!!!
- Exploring the Regularity of Sparse Structure in Convolutional Neural Networks(在卷积神经网络中探索稀疏结构的规律性)
- Layui使用中遇到的问题
- 【BZOJ】4292: [PA2015]Równanie
- SpringBoot:MultipartResolver 文件上传、大小限制相关配置、实现原理与自定义