专栏首页灵儿的笔记几行样式代码,让你的网站全站和图片都变成灰色|CSS样式灰色代码

几行样式代码,让你的网站全站和图片都变成灰色|CSS样式灰色代码

如果需要将你的网站全站和图片变灰,只需要加几段css控制就可以了

效果展示

小编这里试用了下面的几种方法,一般用方法一的效果会更好一些,用其他的几种方法,或多或少的原来网站的部分浮动的样式或者点击效果会失效,导致功能不能用了。

但是第一种方法的话,原来的网站样式或者效果都还不会出现很大的问题,起码我当时试的时候,没有看到有问题的地方,大家也可以多多的尝试一下,不同的几种方法间的区别

方法一

<!-- 可以将整个网站变成灰色的 -->

html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

方法二

html {
    filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
} 

  使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。   如果网站没有使用CSS,可以在网页/模板的HTML代码<head>和</head> 之间插入:

<style  type="text/css">
html {
    filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
} 
</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">

  请将网页最头部的<html>替换为以上代码。   有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …>和</object>之间插入: <param value="false" name="menu"/> <param value="opaque" name="wmode"/>  最简单的把页面变成灰色的代码是在head 之间加

<style type="text/css">

html {
FILTER: gray
}
</style> 

方法三

 <style type="text/css">
 * {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }
    img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }
</style>

参考文章:

https://www.cnblogs.com/zhengyan/p/4726896.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分享个打开a页面自动跳转到b页面的HTML代码

    代码如下: <html> <head> <title>页面跳转</title> <script language="javascript"> location....

    小小鱼儿小小林
  • JavaScript的事件

    javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

    小小鱼儿小小林
  • 非常小巧的一键到达顶部的代码

    小小鱼儿小小林
  • BeautifulSoup使用find,find_all常见问题汇总

    1.soup.find(class='abc')报错,原因是find和find_all里面都不能直接把class作为参数,改写成如下任意一种就对了: 第一种,给...

    kalifa_lau
  • 《Monkey Java》课程5.1之static关键字的作用

    GitOPEN
  • 你知道Jupyter notebook还可以用来做 “视频聊天室” 吗?

    Ipywidgets在Jupyter生态系统中扮演着重要角色,它带来了用户和数据之间的互动。小工具组件是多种的Python对象,通常在Jupyter Noteb...

    用户2769421
  • 你懂RocketMQ 的架构原理吗?

    我们了解到RocketMQ是java语言开发的,我们能更深入的阅读源码了解它的底层原理,而且它具有优秀的消息中间件高级功能。再换个角度想,对于面试MQ来说,其实...

    HUC思梦
  • LeetCode - 所有可能的路径

    我又重新开始更新LeetCode了,以后工作日更新LeetCode,周末更新东野圭吾的小说

    晓痴
  • Golang实现类似Scan或者Scanf功能

    package main import ( _"errors" "fmt" "io" "os"...

    李海彬
  • Golang实现类似Scan或者Scanf功能

    package main import ( _"errors" "fmt" "io" "os"...

    李海彬

扫码关注云+社区

领取腾讯云代金券