HTML+CSS入门 CSS滤镜实现页面灰色黑白色效果详解
沉沙 2018-06-29 来源 : 阅读 3596 评论 0

摘要:本篇教程探讨了CSS滤镜实现页面灰色黑白色效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS的入门。

淘宝的代码

代码如下:

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



CSS3 greyscale 滤镜实现 

如下测试代码: 

代码如下:

.gray { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(100%); 
filter: gray; 
}



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

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

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

<style> 
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} 
</style>  

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//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>



一般的discuz论坛在 你的控制css 文件下修改/images/header/header.css 这个文件 

 

本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端HTML/CSS频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 3 不喜欢 | 11
看完这篇文章有何感觉?已经有14人表态,21%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程