×

长沙 培训课程 前端 最快 速度

长沙web前端培训课程:最快的速度让网页变灰

jnlyseo998998 jnlyseo998998 发表于2023-04-27 02:57:04 浏览17 评论0

抢沙发发表评论

傍晚,前端程序员阿锋刚刚回到家,经理便打来电话说道:我们的网站首页要调整成黑白色,辛苦加个班实现一下吧!很多时候总会遇到一些突发事件需要网站首页均呈灰色。那要如何让网页变灰呢?

阿锋首先想到:图片方面的内容只要换一个图片就好,其他的就是靠控制 css 来进行改变。但是一个网站有很多个css, 那么多的元素都有自己的颜色,整体变灰的工作量大,效率低。所以要有简便快捷的方法。

方案1

sass / less 等 css预编译 语言来解决

再用这些 css预编译 语言来开发的时候, 一般会根据主色调来定义一些颜色变量

$globalColor: gray;

$globalBtnColor: gray;

当修改变量的时候, 就会导致整个网站的主色调改变颜色

但是,因为 sass / less 都是开发阶段使用的内容

一旦修改, 就需要从新编译打包成新的 文件 进行服务器部署,会相对比较麻烦

而且一些细节的地方可能会遗漏掉 (比如没有用全局变量的地方)

方案二

为了简单一些, 快速一些操作,而且过段时间还要变回来,所以可以采取滤镜的方式

一个非常简单的 css 代码

filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);

可以选择直接改 css 文件, 把滤镜添加到 html 标签

html {

filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);

也可以直接修改 html 文件, 把css 样式以行内式的方式添加到 html 标签上

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);">

这样就简单高效的实现了网页的黑白灰色调。