首页>>老刘专栏
昨天打开各个网站,发现网页都变成灰色了。今年国家经历了非常惨痛的时刻,有很多烈士英雄保卫人民的安危遇难,昨天全国下降半旗,北京时间 10 点全国默哀三分钟,来致敬英雄们。为了深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞,4月4日0点起,全国多家网站和移动端,比如百度、优酷、爱奇艺、哔哩哔哩、抖音、快手、斗鱼和CSDN等平台给出公告称:2020年4月4日全国性哀悼活动期间,停止今天一切公共娱乐活动。
随便打开这些任何一个网站,全站的内容都变成了灰色,包括按钮、图片等等。相信这时候从事程序开发的粉丝可能会好奇这是怎么做到的呢?
其实解决方案很简单,只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。如下图,有一个灰色样式:[filter: grayscale(100%);],也许就是这一个样式控制着整个网页显示效果。
现在试着关掉这个样式,会发现整个csdn页面恢复了往常的红色主题,包括网站logo、图片和按钮都恢复了。
总结上面的实验效果,果然是这个样式在起作用,而且是全局的效果,因为它是作用在了 html 这个节点之上的。只要修改这部分CSS代码:
html { webkit-filter: grayscale(100%); filter: grayscale(100%);}
当然这种修改CSS的方式还有很多,我们可以在Mozilla发布的样式效果测试平台上看看 filter 这种不同层叠样式效果。
平台地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通过这几个用力可见通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。官网介绍了一些语法:
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
设置一种函数,方法如下:
filter: <filter-function> [<filter-function>]* | none
如果对层叠样式感兴趣的朋友可以阅览下官网的说明文档:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
除了这些开发样式调整的方法以外,还可以走系统架构角度解决网页的显示问题,通常很多大型网站都用上了反向代理nginx服务器,所有网站访问,都要通过nginx代理去访问到网页内容。
- 上一篇: 熊掌号的百度名称取消展示!熊掌号这次真的死透了
- 下一篇: 2020年的seo行业痛点,都解决了吗?
猜你喜欢
- 2024-02-23 提高小红书运营效率的6个工具
- 2022-11-10 【官方文档】百度搜索网站被黑防范指南
- 2022-11-03 【干货必备】百度搜索优质内容指南
- 2022-08-01 百度隐藏“快照”功能:原因未知-百度快照没了?
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 2022-06-15 SEO尴尬,有排名,没流量,没咨询,怎么办?
- 搜索
-
- 2024-04-07 小红书+抖音+直播常见违禁词及替换方法
- 2024-03-14 刷量成风,广告主损失惨重?该被重视了!
- 2024-03-06 代理投的好,还需要招自己的优化师吗?
- 2024-02-23 提高小红书运营效率的6个工具
- 2024-02-23 千川投放百宝书:2万字详解,一篇全掌握!
- 2024-02-20 年后求职15个关键面试问题,助优化师脱颖···
- 2024-01-31 不行就去做销售吧!
- 2024-01-09 合格的优化师,需具备这6项思维能力!
- 2023-12-28 25个金句文案句式,直接套!
- 2023-12-05 做私域必备的10个朋友圈黄金模板
- 2023-12-05 15个爆款短视频文案技巧,看完立马用!
- 2023-11-27 浅析:《百度搜索优质内容解读》,当下百度···
- 2019-11-01 Origin DNS error:使用百···
- 2020-06-20 “401 - 未授权: 由于凭据无效,访···
- 2020-12-01 一级域名好还是二级域名好?
- 2020-10-13 百度抓取诊断工具一直抓取失败怎么办?
- 2019-12-09 域名解析后,网站返回状态码511应对方法
- 2020-04-10 百度下拉框怎么刷?刷百度下拉框软件原理及···
- 2019-08-12 网站出现“403,服务器上文件或目录拒绝···
- 2021-04-13 html/txt文件中文用浏览器打开有乱···
- 2021-01-06 百度移动端的搜索结果上线“踩顶”功能,对···
- 2020-09-03 element.style样式的修改
- 2019-11-06 正确打开.db数据库文件的两种方式,避免···
- 2020-10-20 UC神马搜索怎么做快速排名优化
- 2019-04-02 网站首页收录不见了,只剩内页收录是什么原···
- 2019-08-26 合肥某设计公司客户:服务器忘记续费,百度···
- 2021-03-23 SEO的迷茫:未来会走向何方?
- 2022-04-22 百度搜索引擎‘去官网化’,线上推广要放弃···
- 2020-05-12 「想让排名好,不妨看看」合肥seo分享关···
- 2019-09-04 网站页面的标签编码标准与否对SEO有何影···
- 2020-01-10 知名站长工具服务商:爱站网突然关站
- 2019-11-04 SEO工具发布“头条权重值”,“搜索Pl···
- 2020-07-28 中小型企业公司网站新的产品页面怎样提升S···
- 2019-02-20 phpcms怎么把标题后缀改为站点名称?
- 2020-01-17 【指南】10个防止网站被黑的做法,知其所···
- 2020-07-31 搜索引擎排名差该怎样来评估原因?
- 热门标签
-
- 401错误
- 401未授权
- 语义效应
- 话术技巧
- 百度
- 谷歌
- pagerank算法
- 算法原理
- tab切换
- 选项卡滑动切换
- 达克效应
- 认知局限
- 交流分享
- webp转GIF
- webp格式转GIF动图
- webp to gif
- 锚定效应
- 百度快排
- 快速排名
- SEO快排
- SEO快速排名
- 万词霸屏
- SEO优化
- 按天计费系统
- 搜索推广模式对比
- SEO优化师
- seo工资
- 合肥seo
- seo公司
- 合肥优化公司
- 选择seo公司
- 互联网黑话
- 2019it黑话
- 百度熊掌号
- 网站被k
- 收录消失
- 网页劫持
- 灰色样式
- 百度公告
- seo外包
- 外包公司
- seo职业发展
- seo计费系统
- FTP
- ftp隐藏文件
- 301重定向
- 首选域名
- 301跳转
- seo改版
- 网站改版周期
- spider爬虫
- 在家办公
- 伪静态
- 纯静态
- seo友好度
- seo前景
- seo发展
- 2019冬至
- 冬至
- 企业主
- 中文搜索
- 头条搜索
- 中文搜索引擎起源和发展
- 网站改版
- seo部署
- seo内容
- 优质内容
- seo高手
- seo套路
- 头条权重
- 私域流量
- seo误区
- 百度小程序
- 小程序
- 百度算法
- 算法更新
- 网站排名波动
- 网站惩罚
- 友情链接
- 被惩罚链接
- seo策略
- seo平衡
- seo和可访问性
- seoer
- 提升seo价值
- 黑帽SEO
- 刷快排
- 重复内容
- 重复页面
- 屏蔽右键
- 禁止右键
- 禁止查看源代码
- seo专家
- seo思维塑造
- 互联网名词
- it专属名词
- 内啡肽
- seo习惯
- 360算法