img.grayscale {
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"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
- 浏览: 1236211 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (883)
- Spring (101)
- Swing (1)
- Mysql (21)
- Js (59)
- Jsp (2)
- Hibernate (19)
- Myeclipse (5)
- SqlServer 2000 (2)
- poi (15)
- Java (70)
- SSH (12)
- Html (47)
- Fusion Charts (1)
- C\C++ (2)
- 汇编 (36)
- Jquery (37)
- Struts2 (6)
- Ubuntu (16)
- powerDesinger (4)
- Jboss (3)
- JAX-RS (13)
- JAXB (5)
- JAX-WS (11)
- JMS (4)
- WebSocket (8)
- PHP (16)
- Flash (1)
- maven (3)
- Oracle (8)
- HttpClient (6)
- sqlserver (19)
- svn (5)
- Tomcat (3)
- Jdbc (3)
- EsayUi (11)
- 微信公众平台 (19)
- IIS (2)
- Freemarker (11)
- Comet (1)
- Spring MVC (85)
- JBoss Seam (3)
- 二维码 (9)
- Spring Security (4)
- Ehcache (3)
- Apache Shiro (7)
- jackson (16)
- JPA (8)
- jcaptcha (2)
- RSA (2)
- Ajax (6)
- 跟我学Shiro (0)
- Spring4 (19)
- 跟我学spring3 (0)
- css (32)
- excel (4)
- Filter (3)
- 微信公众帐号开发教程 (0)
- Android (6)
- log4j (6)
- 淘宝接口 (17)
- 支付集成 (3)
- 单点登录 (3)
- Html5 (27)
- 移动平台前端 (3)
- Linux (44)
- FusionCharts (27)
- Json Jackson Xml (5)
- 方培工作室-微信开发 (0)
- Apache与Tomcat与IIS整合 (10)
- Nginx (17)
- webService (2)
- apache (4)
- lucene (3)
- lodop (2)
- Shiro (3)
- zTree (2)
- ireport (12)
- Servlet3.0 (5)
- 前端美工 (19)
- AngularJS (1)
- C#开发微信门户及应用 (0)
- Shell (3)
- bat脚本 (16)
- Bootstrap (26)
- Less (10)
- photoshop (6)
- Redis (6)
- Mongodb (10)
- MyBatis (3)
- 数据结构 (0)
- 读写分离-主从复制 (0)
- JFinal (0)
- 百度地图api (3)
- hadoop-hbase-hive-spark (3)
- WebStorm (2)
- Quartz (5)
- ios (0)
- Mina (8)
- Android Studio (4)
- Ratchet教程 (0)
- 移动端重构系列 (1)
- cubic-bezier贝塞尔曲线CSS3动画工具 (1)
- nginx+tomcat+memcached集群 (0)
- 集群 (0)
- ZooKeeper (3)
- Dubbo (0)
- vpn (0)
- kafka (0)
- JVM垃圾回收机制 (0)
- 微信小程序 (0)
- Lua (0)
- Hystrix (0)
- Vue.js (0)
- mycat (0)
- Openresty (0)
- springBoot (0)
- 新分类 (0)
- guava (0)
- 大数据 (0)
- Sentinel (0)
最新评论
-
JackMacing:
中文怎么解决?
SpringMVC与iReport(JasperReports) 5.6整合开发实例 -
18335864773:
用pageoffice把.可以实现在线的文档操作.直接转pdf ...
转:使用jasperreport动态生成pdf,excel,html -
linhao0907:
推荐一款轻量开源的支付宝组件:https://github.c ...
关于Alipay支付宝接口(Java版) -
songronghu:
太好了,非常有用,谢谢分享~
Java ConcurrentModificationException 异常分析与解决方案 -
wzwahl36:
http://www.atool.org/json2javab ...
Java下利用Jackson进行JSON解析和序列化
发表评论
-
Sublime 插件- px 转rem;Atom 编辑器插件: px2rem-plus
2018-09-07 16:18 0Sublime 插件- px 转rem htt ... -
前端工程师需要明白的「像素」
2018-09-07 09:58 0前端工程师需要明白的「像素」 https://www ... -
淘宝flexible.js漏洞修补
2018-09-06 18:17 0CSS像素、设备独立像素、设备像素之间关系 htt ... -
电脑端预览手机版页面
2018-05-30 23:23 5782QQ:433647 -
前端js和css的压缩合并之wro4j
2018-05-15 11:55 0http://fantaxy025025.iteye. ... -
flexible.js
2018-05-02 19:01 0http://yunkus.com/mobile-ad ... -
Flex 布局教程
2018-01-09 17:09 0http://www.ruanyifeng.com/ ... -
移动端弹出层加遮罩后禁止滑动
2018-01-08 18:57 0//实现滚动条无法滚动 var mo=functio ... -
利用@media screen实现网页布局的自适应
2017-09-21 11:30 0http://blog.csdn.net/inuyas ... -
易百教程
2017-06-07 14:00 0http://www.yiibai.com/lua/l ... -
已测试-幻灯滑动+滚动列表
2017-01-13 10:25 0<!DOCTYPE html> < ... -
iscroll4升级到iscroll5全攻略笔记 (博主已改行,不再更新)
2017-01-12 15:38 0http://blog.csdn.net/gcz ... -
IScroll5实现下拉刷新上拉加载更
2017-01-12 15:32 0http://blog.csdn.net/chenzh ... -
iscroll5 上下拉动刷新
2017-01-12 15:28 0http://www.cnblogs.com/mrxi ... -
html页面滚动到最底部时,无限滚动
2016-12-19 14:23 0<!DOCTYPE html> & ... -
简约时尚的纯CSS3 Tabs选项卡特效
2016-12-05 11:17 0插件描述:这是一款使用纯CSS3制作的Ta ... -
JS组件系列——表格组件神器:bootstrap table
2016-11-30 11:54 0JS组件系列——表格组件神器:bootstra ... -
Bootstrap可编辑表格
2016-11-30 11:46 0http://blog.csdn.net/lzxad ... -
HTML5中的Range对象的研究
2016-11-24 18:34 0http://www.alixixi.com/web ... -
js createRange与createTextRange的一些用法实例
2016-11-24 13:39 0一、返回createTextRange的text和ht ...
相关推荐
通过修改`filter`属性,我们实现了与CSS类似的效果,但更具有兼容性和控制性。 此外,如果这个压缩包包含jQuery插件,那可能是为了扩展jQuery的功能,比如添加动画效果或者提供更便捷的操作方式。但是,根据提供的...
同时,我们也包含了针对不同浏览器的前缀,以确保跨浏览器兼容性。 如果只想在特定情况下应用这个效果,例如当用户点击某个按钮或在特定日期,可以使用 JavaScript 来动态添加或移除这个 CSS 类。例如,你可以创建...
在实际项目中,你可能还需要考虑其他因素,比如浏览器兼容性。尽管大多数现代浏览器都支持CSS3的`filter`属性和`transition`属性,但为了确保在较旧版本的浏览器中也能正常工作,你可能需要引入渐进增强或回退策略,...
本文将详细介绍如何通过简单的CSS代码实现网页整体变灰的效果。 #### 二、关键知识点解析 ##### 2.1 CSS滤镜属性 为了实现整个页面变灰的效果,主要依赖于CSS中的`filter`属性。该属性可以对元素应用多种视觉效果...
* 图片处理:在图片处理中,置灰可以用来实现图片变灰的效果。 * 视觉效果:置灰可以用来实现视觉效果,如灰度图像、老照片效果等。 三、Html 页面置灰的优点和缺点 Html 页面置灰有以下优点: * 美化视觉效果:...
在实际应用中,你可能会遇到一些额外的考虑,如性能优化(避免不必要的DOM操作)和兼容性问题(确保在不同浏览器中都能正常工作)。同时,你还可以结合其他技术,如CSS3的伪类或CSS变量,来实现更高效和灵活的图片置...
为了保证兼容性,可以使用渐进增强的策略,为不支持这些特性的浏览器提供备选样式: ```css /* 对于不支持border-radius的浏览器 */ img { -webkit-border-radius: 8px; /* Safari 和 Chrome */ -moz-border-...
为了使效果更加完善,你可能还需要考虑不同浏览器的兼容性,添加必要的前缀(如`-webkit-`、`-moz-`等)以确保在各种环境下都能正常工作。同时,也可以通过JavaScript来增加更多的交互功能,如验证用户是否至少选择...
- 使用条件注释:针对IE8浏览器,可以使用HTML的条件注释来引入特定的CSS或JavaScript文件,以确保在IE8中加载兼容性解决方案。 - 前进兼容(Graceful Degradation):设计时优先考虑现代浏览器,然后逐步降级在旧...
渐变效果广泛应用于按钮、背景及其他视觉元素中,以往这些效果需要通过图片来实现,但现在通过CSS3中的渐变属性,我们可以直接用代码来定义。 在CSS3中,渐变分为线性渐变(linear-gradient)和径向渐变(radial-...
外贸博客通常需要考虑跨语言和多设备兼容性,HTML5的这些特性正好满足了这一需求。 模板的灰色背景设计不仅体现了专业和稳重,还为内容提供了良好的衬托,避免了色彩过于繁杂导致的注意力分散。这种设计原则强调...
网页变灰主要通过CSS或JavaScript来实现。对于CSS,可以使用滤镜效果,但这种方法仅适用于支持CSS3的现代浏览器,例如Chrome、Firefox、Safari和Opera。对于不支持CSS滤镜的老版本浏览器,尤其是像Internet Explorer...
总之,“纯CSS3漂亮表格(圆角、渐变、多背景色)”是一个很好的示例,它展示了如何利用CSS3的新特性提升网页设计的美感和交互性。通过学习和应用这些技巧,开发者可以创建出更具吸引力和现代感的网页应用。在压缩包...
本文主要探讨如何使用CSS实现这一功能,并确保兼容性覆盖到主流浏览器,包括IE、Firefox、Chrome、Opera以及Safari。下面我们将详细讨论CSS中的滤镜(filters)属性,以及如何通过不同的前缀和非标准方法来实现跨...
使用DIV+CSS的方式,可以实现更精确的布局控制和更高的浏览器兼容性。 这个模板很可能包含一系列的HTML文件和CSS文件,以及可能的图像和其他资源文件。例如,"chahua2351"可能是一个HTML文件名,代表网页的主入口,...
综上所述,实现图片变灰的方法大致有几种: 1. 制作两张图片:一张正常色彩,一张灰度色彩,并在需要时替换显示。 2. 利用CSS的`filter: grayscale()`属性,但只兼容IE浏览器。 3. 对于Firefox及其他不支持`filter: ...
因此,一个良好的邮件CSS模板需要考虑到兼容性和响应性。在这个模板中,可能包含了以下关键知识点: 1. **基础CSS语法**:模板使用CSS来设置字体、颜色、边距、填充、布局等样式。例如,使用`color`、`font-family`...
63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典...
在这个模板中,HTML和CSS的结合使用,使得网页的代码结构清晰,易于维护,同时也能确保在不同设备和浏览器上的良好兼容性。 "chahua2295"可能是压缩包内的主文件或文件夹名,通常包含HTML文件、CSS文件和其他相关...
ie_fixes.css则专门针对Internet Explorer浏览器的兼容性问题进行修复。 在压缩包的文件名列表中,我们看到以下几个HTML文件: 1. archives.html:这可能是归档页面的模板,用于展示网站的过往内容。 2. index....