0
0
- 网站都变成灰色，有哪些方法可以快速实现？——软件测试圈
有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日的时候，都会让网站的全部网页变成灰色（黑白色），以表示我们对逝者或者英雄的缅怀和悼念。
当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？
有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。
其实，解决方案很简单，只需要几行代码就能搞定了。通过参考资料，我总结出以下几个方法可以帮助我们达到目的：
使这个网页的颜色变成灰色的最简单的方法，就是在当前页面的css里面。添加下面的代码，并且让他在任意的浏览器里面正确的执行：
方法一:
<style type="text/css">
html {
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(1)
}
</style>filter是滤镜的意思，filter:gray的意思就是说给页面加上一个灰度的滤镜，所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的，意思和FILTER: gray;差不多，只是写法不同罢了。
方法二：
下面这段代码可以把网页变为黑白，将代码加到 CSS 最顶端就可以实现素装，如果网站没有使用 CSS，可以在网页/模板的 HTML 代码和 之间插入：
<style>
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>有一些网站可能使用这个 css 不能生效，是因为网站没有使用最新的网页标准协议，请将网页最头部的替换为以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
还有一些网站 FLASH 动画的颜色不能被 CSS 滤镜控制，可以在 FLASH 代码的和之间插入：
<param value="false" name="menu"/> <param value="opaque" name="wmode"/>
最后
给出一段规范的代码，把这段代码加入到网站页面的css里面即可实现页面变成灰色的效果：
html{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}作者：肥肥技术宅
原文链接：https://blog.csdn.net/m0_71777195/article/details/128159387
- -1.00 查看剩余0%
- 【留下美好印记】赞赏支持
热门文章
最新讲堂
- 推荐阅读
- 换一换
- 背景介绍 一直以来，性能测试是被一部分人遗忘，又让另一部分人无可奈何的东西。在绝大部分的创业公司，性能测试基本上都是被遗忘的，他们认为功能测试和稳定性测试才是重点，而在中等规模的公司中一部分测试人员考虑进行性能测试，却无从下手。 这个系列，从 baidu 测试工程师的工作实践出发，介绍移动端性能测试的通用方法和结合产品特点的不同侧重。 随着流量费用的降低，越来越多的人开始在公交地铁等移动场景使用视频应用。视频类的应用会更多关注播放流畅度、下载等性能指标，下面介绍的是百度视频的性能测试方法。 百度视频是第三方视频资源聚合类产品，主要提供用户在线播放、离线下载各种视频服务，提供 PC ...
-
- 测试用例设计技术和方法，其目的是为了解决测试分析与设计过程中碰到的问题，纯粹的理论只是应用技术和方法的基础，但不是目的。测试用例分析与设计过程，需要我们不断的应用结构化思维、发散性思维和可视化思维，以构建系统化的测试分析与设计框架。 我将我写的《软件测试设计》书中的一些测试用例技术与方法的思维导图分享给大家，希望对大家有所帮助。测试用例分析与设计过程中，大家需要注意的是： 1、解决问题是目的，技术与方法是帮助解决问题的基础，但不要本末倒置； 2、通过分析与设计得到测试用例的过程，必须要在其中构建测试模型，其中的主要输入来自被测对象的领域知识和题主所说的测试技术与方法； 3、每个测试...
-
- 新人必看：测试过程中我们的反思05-22在我们的测试工作中，除了需要不断的学习新知识外，还有一个可能常常被我们忽视的工作，那就是反思。反思的重要性不言而喻，可以帮助我们总结过往的经验教训，可以帮助我们重新复盘过去工作中的得失，可以让我们通过曾经犯下的错误找到未来需要规避的问题，可以通过积累的经验获取后续工作中更高效的方法。那么问题来了，做测试的我们，该反思什么呢？在我们团队的日常工作中，每隔一段时间我们就会组织召开一次学习总结会。在这个会上，我们会去回顾过去一段时间工作中大家遇到的问题、学到的新知识、沉淀的经验和方法。在这个过程中，大家互相交流，互相碰撞，互相提问，互相弥补。通过这样的讨论学习，每个人都能感受到这些碰撞出的火花带来的...
- 想要测试基本功扎实，离不开这2点！——软件测试圈02-28软件测试记录，是一项比较考验逻辑思维和想象力的工作。它既不像软件开发那样有实实在在的代码作为工作成果的展示，也没有BA那样，将软件需求拆分为story，就能够决定项目的走向。测试工程师的测试成果则没有那么明显，没有很容易可度量的成果展示，那么为了保证软件质量，同时也要知会给项目相关方，那么测试日报和测试报告就是非常重要的途径了。 测试日报和测试报告，在一定程度上是可以避免冗长的会议汇报，以及反复和项目相关方的沟通，体现了数据一次性报备，同时在原有邮件上全部回复式的更新，可以清晰地体现出测试工作的推进和版本的迭代情况。有助于未能深入了解项目的相关方，从基础数据入手来了解整个项目的运行。同时...
- 这些测试中的奇怪问题你见过吗？——软件测试圈04-30测试过程中，无论案例怎么设计、怎么执行，都需要测试人员有一定的敏感度去发现问题，测试人员的经验积累无论对于案例的设计、测试执行还是缺陷的发现都有很重要的意义，所以接下来我想给大家分享一些我自己在测试中遇到的经典或非经典场景。 1 需求了解不到位 有些问题其实并不算很难或很复杂，只是需要测试人员在测试前仔细阅读需求，明确需求要求实现的功能、需求给定的请求和应答报文字段、需求阐明的业务规则，所有需求里明确写了的内容在测试中应当务必保证覆盖。我在测试中遇到的问题有返回报文字段和需求不一致，业务规则要求取值范围大于等于固定值，在实现中变成了大于固定值等等情况。相关场景多是疏忽没有仔细阅读需求所...
- 关于我们 联系我们 版权声明 广告服务 站长统计
- 建议使用IE 11.0以上浏览器，800×600以上分辨率，法律顾问：上海兰迪律师事务所 项棋律师
- 版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024, 沪ICP备05003035号
- 投诉及意见反馈：webmaster@51testing.com; 业务联系：service@51testing.com021-64471599-8017
- 51testing软件测试圈微信