首页>>前端开发
一、前言
在很多时候我们需要把整个网站变灰,比如“致敬”。来看看网站是如何实现整体变灰的。
人的一生是短暂的,重要的是能够在短暂的时间内造就无限的价值。由衷的表示致敬我们将永远铭记!
如果首页html换成黑白风格的,这个好实现。可是每个封面图都重新做一张黑白的版本,每个都是用户自己的投稿啊,双色球每期开奖结果 保证封面图都能黑白色呢?后期靠人工换的话,那代价也大了,而且也很傻。
二、解密HTML如何将网站变为黑白
众所周知我们平时使用的网站都是IT从业者辛勤劳动所创造出来的,其实创造一个黑白网页其实并不难,真的很简单,因为只需要一行代码。
html {-webkit-filter: grayscale(100%);}
是的你没看错就这一行一个网页就变成了一个灰度图
下面我将进行一次简单的演示
这是一个非常简单的一段HTML代码
突然我发现在html根结点html标签下面有一个属性:filter: grayscale(1);
这是一个非常简单的一段HTML代码
html{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
浏览器支持:
grayscale():
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。
三、IE浏览器
上面所说的css3属性IE浏览器并不支持,其实这样做已经覆盖了大部分浏览器
filter: gray;
这个属性直接加载html上是不管用的,如果需要图片变灰可以只将样式作用于img标签,或者用*通配符作用于所有元素,这样整个网站就会变灰。
经测试,在IE7-9都是没问题的,IE9以上不能生效。
四、通用方案
如果你执意所有的浏览器都有这个效果,可以通过Greyscale.js实现:
在页面引入js文件:
<script src="//james.padolsey.com/demos/grayscale/grayscale.js"></script>
然后:
grayscale(document.getElementsByTagName("img"));
或者直接这样:
grayscale(document.getElementsByTagName("html"));
实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换。
因此,在现代浏览器下,对于该方法,图片的灰度处理有两个局限性:
1. 速度。300*300这张一般般大小的图片变灰就要数秒之久;
2. 跨域。安全性机制,无法转换跨域的图片为黑白色。
五、更多
对比度:filter: contrast();
色相旋转:filter: hue-rotate();
阴影: filter: drop-shadow() ;
- 上一篇: 优化 CSS 代码的12个小技巧
- 下一篇: 没有了
猜你喜欢
- 2022-11-10 【官方文档】百度搜索网站被黑防范指南
- 2022-11-03 【干货必备】百度搜索优质内容指南
- 2022-08-01 百度隐藏“快照”功能:原因未知-百度快照没了?
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 2022-06-15 广东福利彩票双色球尴尬,有排名,没流量,没咨询,双色球每期开奖结果 办?
- 2022-05-16 IE浏览器宣布6月16日退役 Edge浏览器将接棒
- 搜索
-
- 2023-03-20 做竞价推广,现在好多玩法已经消失了
- 2023-03-20 【同台展现】百度推广结果页展现多条广告的···
- 2023-03-20 百度竞价碰到恶意点击双色球每期开奖结果 办?让光击穿黑暗···
- 2023-03-16 优化师,35岁后换行打螺丝?
- 2023-03-15 “假量”问题,就应该上315
- 2023-03-14 巨量千川保命口诀!熟记~
- 2023-03-11 广告投放100个行业黑话
- 2023-02-15 互联网公司忽悠员工的黑话,套路太深了
- 2023-02-14 SEM新接手账户,需要做哪些准备?
- 2023-02-14 干货!竞价推广常见问题解析
- 2023-02-10 ChatGPT淘汰的那些人,其实早就已经···
- 2023-02-03 流量运营的核心精华,又何止1000种方法
- 2019-11-01 Origin DNS error:使用百···
- 2020-12-01 一级域名好还是二级域名好?
- 2020-06-20 “401 - 未授权: 由于凭据无效,访···
- 2020-10-13 百度抓取诊断工具一直抓取失败双色球每期开奖结果 办?
- 2019-12-09 域名解析后,网站返回状态码511应对方法
- 2021-01-06 百度移动端的搜索结果上线“踩顶”功能,对···
- 2020-09-03 element.style样式的修改
- 2019-08-12 网站出现“403,服务器上文件或目录拒绝···
- 2019-11-06 正确打开.db数据库文件的两种方式,避免···
- 2020-10-20 UC神马搜索双色球每期开奖结果 做快速排名优化
- 2020-04-10 百度下拉框双色球每期开奖结果 刷?刷百度下拉框软件原理及···
- 2021-04-13 html/txt文件中文用浏览器打开有乱···
- 2019-06-04 多角度分析变更网站title名称对广东福利彩票双色球···
- 2019-11-21 你的网站还在用flash吗?flash的···
- 2020-09-27 css3实现一个div设置多张背景图片
- 2020-05-14 网站被k,收录归零消失,是双色球每期开奖结果 回事以及怎···
- 2022-08-17 升级提示 执行SQL发生错误!错误:du···
- 2019-12-09 2020年,如何避免网站被百度算法降权?
- 2020-01-08 百度快排技术泛滥成灾,白帽广东福利彩票双色球还有出路···
- 2019-11-01 被语言暴力毁掉的中国孩子ZT
- 2020-04-14 招一个广东福利彩票双色球优化师,要给多少工资才合理?
- 2020-01-10 想要提升网站咨询量,没有高质量内容是万万···
- 2020-02-06 asp.net:“/”应用程序中的服务器···
- 2019-12-30 广东福利彩票双色球技术党都在迷恋的黑帽seo
- 热门标签
-
- Error 1016
- Origin DNS error
- 源DNS服务器错误
- element.style
- css
- .db文件
- 域名解析
- 别名解析
- CNME解析
- A记录
- asp.net
- php
- jsp
- 开发语言对比
- 白名单
- 香港主机
- 主机白名单
- 宝塔
- 个人备案
- 企业备案
- 网站备案
- 500错误
- 字体大小
- 用户体验
- 301
- 301重定向
- 301永久重定向
- 锚点跳转
- 虚拟主机
- 网站搭建
- 自适应网站
- web前端
- 移动端
- 响应式网站
- 网站被黑
- 后台入侵
- 源码安全
- 阿里云服务器
- 实例类型
- 开源CMS
- 织梦cms
- ftp
- flashfxp
- 备案驳回
- 阿里云备案
- js空链接
- 伪元素选择器
- 伪类选择器
- CSS3
- 百度转码
- 禁止转码
- 网站建设
- 低成本网站
- 域名备案
- 服务器流量
- 网站流量耗尽
- 谷歌插件
- Chrome
- win10连接远程服务器
- 服务器空间
- 网站空间选择
- 网站安全
- 网站设计
- seo要点
- seo建站方案
- html标签
- seo标签
- 网站体验设计
- 老年用户
- 网站标签
- 标签优化
- 0收录
- 新域名收录
- 网站收录
- 独立ip主机
- seo服务器
- X-Powered-By
- dede
- 分页样式代码
- robots.txt
- javascript
- 编程语言
- 营销型网站
- 定制网站
- 服务器稳定性
- 网站续费
- filter
- 滤镜
- 蜘蛛
- 屏蔽蜘蛛
- SQL
- Sqlite
- pbootcms
- PbootCMS
- sqlite
- mysql
- 数据库