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%
- 【留下美好印记】赞赏支持
热门文章
最新讲堂
- 推荐阅读
- 换一换
- 软件测试用例的设计心得——软件测试圈10-191、了解软件的原始需求（测试目的）在编写一个软件或者模块的测试用例时候，一定要明白这个功能的原始需求，也是软件的使用者（客户）的需求。理解原始需求后，编写的测试用例才更有目的性。2、熟悉软件的功能需求（测试点）这个功能需求是指软件的细化需求点，这个一般在需求文档里面都会体现。这里要做的是把 “粗略”的需求，细化成一个个小需求点。熟悉功能需求后，要知道软件是怎么使用的，这也才能覆盖到各种操作。总之，测试用例一定要全部覆盖所有的需求点，这是基本的一点。3、熟悉软件的实现原理（测试点）在理解原始需求和软件的功能需求后，根据需求编写的测试用例，基本上都能覆盖得比较全面了。在此基础上，熟悉软件的实现原理...
- 测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试，确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入，甚至可能有害的输入时。 为什么要进行单元测试？ 进行单元测试有许多不同的方法，一些主要目的是： 验证功能：单元测试确保代码做正确的事情并且不做任何不应该做的事情——大多数错误发生在这里。 防止代码回归：当我们发现错误时，添加单元测试来检查场景可以防止代码更改在将来重新引入错误。 记录代码：通过正确的单元测试，一套完整的测试和结果提供了应用程序应该如何工作的规范。 保护您的应用程序：单元测试可以检查可利用的漏洞（例如...
-
- 如何自动化测试——软件测试圈05-20什么是自动化测试？在软件测试领域，有两种测试技术：手动和自动化。这两种方法都是为了执行测试用例，然后将实际结果与预期结果进行比较。简而言之，手动测试是一种人工操作的测试技术，可确保软件代码完成应有的功能。那么，什么是自动化测试？相反，这是一种自动运行测试、管理测试数据、利用结果来提高软件质量的实践。如果熟悉测试，则可以理解，连续的开发周期需要重复执行相同的测试套件。如果是手动执行此过程，可能会非常耗时。但是，通过利用测试自动化工具，可以更轻松地编写测试套件，减轻人为干预并提高测试ROI。自动化测试的好处简化测试执行使用自动化测试工具，可以根据需要，多次重复使用测试脚本，从而节省了时间和精力。想...
- 引言 如何保证测试的数据质量，说白了，就是如何保证测试数据的准确性。 深聊测试数据 我们想一个问题：在实际的项目测试中，我们的数据质量与什么有关呢？ 是 测数数据的多少，还是测试数据的内容？ 同样，我先不回答， 我们继续往下聊。 回顾，你在整个项目的测试中，我们这里以接口为例， 你会花费很长时间去构造数据，以保证每次的数据质量都是完美的吗？ 纵观整个测试行业，虽然相对于早些年，现在的测试开发工程师的测试质量逐年提升，测试技术也逐年提升。 但是，随着企业的版本迭代的加速， 却很少会有测试开发工程师花费大部分时间在测试数据质量上， 或者说，不是太多的测试开发工程师具备数据质...
-
- 如题，产生 BUG 测试人员需要自己去分析原因吗？大田说说自己的想法：如果说到分析，最终肯定是开发查代码去分析，但是测试人员可以根据问题先做一个初步的定位。 总体思路是：由测试人员初步定位，再协助开发复现，由开发分析代码，解决。 1、如果是测试人员发现的 BUG 可以利用 F12 抓包、Linux看日志 log、查库对比等手段先分析报错情况，这几步基本能发现大部分问题。测试人员把具体报错原因给到开发，也能提升开发的工作效率； 2、如果是客户发现的 BUG 先由测试人员复现，复现出来后，按照上述第 1 点所说，继续后续操作； 3、如果测试时间实在不够 测试人员需要将问题提到缺陷...
-
- 关于我们 联系我们 版权声明 广告服务 站长统计
- 建议使用IE 11.0以上浏览器，800×600以上分辨率，法律顾问：上海兰迪律师事务所 项棋律师
- 版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024, 沪ICP备05003035号
- 投诉及意见反馈：webmaster@51testing.com; 业务联系：service@51testing.com021-64471599-8017
- 51testing软件测试圈微信