首页 > 其他分享 >网站变成灰色---CSS

网站变成灰色---CSS

时间:2022-12-09 17:31:47浏览次数:42  
标签:灰色 filter 100% grayscale --- 滤镜 webkit CSS

最近很多网站,app都变成灰色,包括按钮、图片等等。想达到这个效果主要就是利用样式表CSS来达到。

使这个网页的颜色变成灰色的最简单的方法,就是在当前页面的css里面。添加下面的代码,并且让他在任意的浏览器里面正确的执行:

 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)
}

filter是滤镜的意思,filter:gray的意思就是说给页面加上一个灰度的滤镜,所以html里面的所有内容都会变成黑白的了。不过这个滤镜对于chrome和safari浏览器是无效的,所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用webkit内核的浏览器的,意思和FILTER: gray;差不多,只是写法不同罢了。

​有一些网站可能使用这个 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">

标签:灰色,filter,100%,grayscale,---,滤镜,webkit,CSS
From: https://blog.51cto.com/wyf1226/5926314

相关文章

  • 多网口网关设计,米尔基于Zynq-7010/20开发平台工业网关设计应用
    随着工业物联网的飞速的发展,5G时代的到来,工业控制系统在生产领域应用越来越广泛,工业物联网为未来工业控制系统灵活性和可扩展性的需求提供了支持。工业物联网使我们的生产数......
  • css 文字不换行
    .t_nowp{white-space:nowrap;} white-space:nowrap;使用white-space:nowrap;后的期望结果:......
  • 干货!基于Zynq-7010/7020的多网口工业网关方案分享
    随着工业物联网的飞速的发展,5G时代的到来,工业控制系统在生产领域应用越来越广泛,工业物联网为未来工业控制系统灵活性和可扩展性的需求提供了支持。工业物联网使我们的生产......
  • 5G NR - RLC协议阅读笔记 - Overview
    ​1.写在前面的话诚如通信著名博客sharetechnote作者JaekuRyu在其LTERLC笔记的开场白时说:Personallytome,RLClayerisoneofthetrickestareatounderstandin......
  • CSS绝对定位7大应用场景实战案例分享
    今天我们来分享web前端CSS定位中的position:absolute绝对定位的应用场景案例的相关场景! 绝对定位是CSS中非常中啊哟的知识点,接下来我我们会通过7个不同的层面结合7个不......
  • C语言-第三天!
    关键字(32个)关键字说明​​auto​​声明自动变量​​short​​声明短整数​​int​​声明整数​​long​​声明长整数​​float​​声明单精度浮点型​​double​​声明双......
  • 【12.3-12.9】博客精彩回顾
    一、优秀文章推荐1.​​LAMP平台部署及应用​​2.​​数据结构与算法__03--二叉树前序线索化与前序线索化遍历(Java语言版)​​3.​​Spring框架介绍和使用​​4.​​数据挖......
  • web课程设计 基于html+css+javascript+jquery女性化妆品商城
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • Bash劫持cd命令专用函数_hook-cd,提供交互式选择快速切换到子目录
    Bash劫持cd命令专用函数,提供交互式选择输入序号即可快速cd切换到子目录使用方法:将以下函数代码加入个人配置文件(~/.bash_profile或~/.bashrc)即可,输入cd命令直接回车,即出......
  • 教你如何用纯css代码实现太极阴阳鱼动画效果
    今天看到一个有意思的效果,闲来无事做一个:把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示出两极是用......