利用CSS3把图片变成灰色模式的实例代码


Posted in HTML / CSS onSeptember 06, 2016

先来看看效果图:

利用CSS3把图片变成灰色模式的实例代码

实例代码:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
img{width:400px;}
</style>
</head>
<body>
<img class="gray" src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg</a>">
<img class="gray" src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg</a>" />
<img src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg</a>">
<img src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg</a>" c/>
</body>
</html>

总结
以上就是这篇文章的全部内容,希望大家能喜欢,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
css3弹性盒模型实例介绍
May 27 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 #HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 #HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 #HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 #HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 #HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 #HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 #HTML / CSS
You might like
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
在Javascript中定义对象类别
2006/12/22 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
详解python中的Turtle函数库
2018/11/19 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
详解python的四种内置数据结构
2019/03/19 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
员工拾金不昧表扬信
2014/01/09 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js