返回列表 发新帖
查看: 431|回复: 0

[HTML+CSS+JS特效] 页面黑白 css滤镜实现页面灰色黑白色效果代码

[复制链接]

6671

热度

1万

元宝

262

贡献

管理员

DZ专员

发表于 2014-12-15 16:08:14 | 显示全部楼层 |阅读模式
淘宝的代码

  1. html {
  2. filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  3. -webkit-filter: grayscale(1);
  4. }
复制代码


css3 greyscale 滤镜实现

如下测试代码:
  1. .gray {
  2. -webkit-filter: grayscale(100%);
  3. -moz-filter: grayscale(100%);
  4. -ms-filter: grayscale(100%);
  5. -o-filter: grayscale(100%);
  6. filter: grayscale(100%);
  7. filter: gray;
  8. }
复制代码

  1. html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
复制代码


使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

如果网站没有使用CSS,可以在网页/模板的HTML代码<head>和</head> 之间插入:

  1. <style>
  2. html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
  3. </style>
复制代码


有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
复制代码


请将网页最头部的<html>替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …>和</object>之间插入:

  1. <param value="false" name="menu"/>
  2. <param value="opaque" name="wmode"/>
复制代码


最简单的把页面变成灰色的代码是在head 之间加<style type="text/css">

  1. html {
  2. FILTER: gray
  3. }
  4. </style>
复制代码
返回列表 发新帖
 懒得打字嘛,点击右侧快捷回复【最新发布】   【赞助草根吧享更多权益】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

收藏帖子 返回列表 搜索

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

小黑屋|手机版|草根吧