首页 > 其他分享 >网站都变成灰色了,它是怎么实现的?

网站都变成灰色了,它是怎么实现的?

时间:2022-12-02 15:44:20浏览次数:28  
标签:灰色 效果 网站 100% grayscale filter 实现 变成

先来感受一下变灰后的效果。

 

 

 

这种灰色的效果怎么实现的呢?如何做到图片、文字、按钮都变灰的效果呢?

方案 1,换一套灰色的 UI,那显然成本太大了,用脚指头想一想就知道不太可能。

方案 2,用魔法!

不好意思,还真被你猜中了!在网页端按下 F12,打开开发者模式,用元素选择器定位到 HTML 标签上,在「样式」的面板中往下翻,就可以看到这样一段代码。

 

我把它复制过来大家看一下。

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

 

 

标签:灰色,效果,网站,100%,grayscale,filter,实现,变成
From: https://www.cnblogs.com/zhangzhijian/p/16944663.html

相关文章

  • vue网页变灰色
    一些重要特殊的日子,为了表示哀悼,需要将网页显示为灰色加上两行css即可实现<template><el-container>......</el-container></template><stylescoped>.el......
  • 网站判断来访的iphone/ipad/itouch等设备
    现在越来越多的人用iphone,itouch,ipad等东西了,如何判断用户访问你的网站的时候采用的是这些设备呢?有可能你的想法是,当客户用这些设备访问你的网......
  • 网站变灰设计到脚本知识
    网站变灰是如何实现的以bilibili为例,调出开发者工具,选中html标签,可以看到右边的样式为:html.gray{filter:grayscale(85%)saturate(80%);-webkit-filter:gra......
  • 用NetCore + ReactJS 实现一个前后端分离的网站 (4) 用户登录与授权
    用NetCore+ReactJS实现一个前后端分离的网站(4)用户登录与授权1.前言这几天学了一些前端的知识,用AntDesignPro的脚手架搭建了一个前端项目->这里。登录界面是现......
  • 除了 filter 还有什么置灰网站的方式?
    大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行CSS,就能实现全站置灰......
  • 平密云谷游戏网站高防BGP物理机
    以上是方便用户更了解web服务器。下面简单说说在建站的时候是选择购买还是选择租用比较合适:对一些用户来说不愿租用,更愿意购买,然后进行托管,或是自建机房进行放置,那有什么......
  • js- day03- 将数据变成柱形图
    柱形图的渲染*{      margin:0;      padding:0;    } .box{      display:flex;      width:7......
  • 平密云谷游戏网站高防物理机租用
    所以网站类型不一样对香港服务器的要求也会有比较大的区别。常见的企业站以及个人站主要是以展示为主,所以它们对香港服务器的性能要求不高。如果是电子商务类的网站那就不......
  • 平密云谷网站BGP物理机租用
    并不是解决世界安全需求的万灵药,但是对于希望构建下一代安全应用程序的开发人员来说,它是工具集中的一个重要工具。区块链使我们能够构建极为可靠、健壮的已发生事件的记录,......
  • 网站灰化
    参考链接网站都变成灰色了,它是怎么实现的?实现步骤添加样式.gray{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:gray......