`
zzc1684
  • 浏览: 1236211 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

css兼容性的图片变灰

阅读更多

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+ */
}

分享到:
评论

相关推荐

    css滤镜实现鼠标悬停图片变黑白(灰色).zip

    通过修改`filter`属性,我们实现了与CSS类似的效果,但更具有兼容性和控制性。 此外,如果这个压缩包包含jQuery插件,那可能是为了扩展jQuery的功能,比如添加动画效果或者提供更便捷的操作方式。但是,根据提供的...

    DIV+CSS中如何让整个页面变成灰色

    同时,我们也包含了针对不同浏览器的前缀,以确保跨浏览器兼容性。 如果只想在特定情况下应用这个效果,例如当用户点击某个按钮或在特定日期,可以使用 JavaScript 来动态添加或移除这个 CSS 类。例如,你可以创建...

    css3复选框选中灰色变彩色图片特效.zip

    在实际项目中,你可能还需要考虑其他因素,比如浏览器兼容性。尽管大多数现代浏览器都支持CSS3的`filter`属性和`transition`属性,但为了确保在较旧版本的浏览器中也能正常工作,你可能需要引入渐进增强或回退策略,...

    使整个页面变灰 样式代码

    本文将详细介绍如何通过简单的CSS代码实现网页整体变灰的效果。 #### 二、关键知识点解析 ##### 2.1 CSS滤镜属性 为了实现整个页面变灰的效果,主要依赖于CSS中的`filter`属性。该属性可以对元素应用多种视觉效果...

    Html页面置灰css代码

    * 图片处理:在图片处理中,置灰可以用来实现图片变灰的效果。 * 视觉效果:置灰可以用来实现视觉效果,如灰度图像、老照片效果等。 三、Html 页面置灰的优点和缺点 Html 页面置灰有以下优点: * 美化视觉效果:...

    jquery 图片置灰,添加浮层

    在实际应用中,你可能会遇到一些额外的考虑,如性能优化(避免不必要的DOM操作)和兼容性问题(确保在不同浏览器中都能正常工作)。同时,你还可以结合其他技术,如CSS3的伪类或CSS变量,来实现更高效和灵活的图片置...

    css3高亮图片文字显示效果

    为了保证兼容性,可以使用渐进增强的策略,为不支持这些特性的浏览器提供备选样式: ```css /* 对于不支持border-radius的浏览器 */ img { -webkit-border-radius: 8px; /* Safari 和 Chrome */ -moz-border-...

    css3复选框选中变灰特效

    为了使效果更加完善,你可能还需要考虑不同浏览器的兼容性,添加必要的前缀(如`-webkit-`、`-moz-`等)以确保在各种环境下都能正常工作。同时,也可以通过JavaScript来增加更多的交互功能,如验证用户是否至少选择...

    ie8兼容html5 css3圆角阴影渐变placeholder等属性

    - 使用条件注释:针对IE8浏览器,可以使用HTML的条件注释来引入特定的CSS或JavaScript文件,以确保在IE8中加载兼容性解决方案。 - 前进兼容(Graceful Degradation):设计时优先考虑现代浏览器,然后逐步降级在旧...

    CSS3,线性渐变(linear-gradient)的使用总结

    渐变效果广泛应用于按钮、背景及其他视觉元素中,以往这些效果需要通过图片来实现,但现在通过CSS3中的渐变属性,我们可以直接用代码来定义。 在CSS3中,渐变分为线性渐变(linear-gradient)和径向渐变(radial-...

    灰色背景透明css3博客模板-灰色 外贸 透明 css3 html 标准 博客.rar

    外贸博客通常需要考虑跨语言和多设备兼容性,HTML5的这些特性正好满足了这一需求。 模板的灰色背景设计不仅体现了专业和稳重,还为内容提供了良好的衬托,避免了色彩过于繁杂导致的注意力分散。这种设计原则强调...

    使网页变灰,支持IE、FireFox、Opera、360浏览器等

    网页变灰主要通过CSS或JavaScript来实现。对于CSS,可以使用滤镜效果,但这种方法仅适用于支持CSS3的现代浏览器,例如Chrome、Firefox、Safari和Opera。对于不支持CSS滤镜的老版本浏览器,尤其是像Internet Explorer...

    纯CSS3漂亮表格(圆角、渐变、多背景色).rar

    总之,“纯CSS3漂亮表格(圆角、渐变、多背景色)”是一个很好的示例,它展示了如何利用CSS3的新特性提升网页设计的美感和交互性。通过学习和应用这些技巧,开发者可以创建出更具吸引力和现代感的网页应用。在压缩包...

    css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式

    本文主要探讨如何使用CSS实现这一功能,并确保兼容性覆盖到主流浏览器,包括IE、Firefox、Chrome、Opera以及Safari。下面我们将详细讨论CSS中的滤镜(filters)属性,以及如何通过不同的前缀和非标准方法来实现跨...

    灰色复古CSS网页模板

    使用DIV+CSS的方式,可以实现更精确的布局控制和更高的浏览器兼容性。 这个模板很可能包含一系列的HTML文件和CSS文件,以及可能的图像和其他资源文件。例如,"chahua2351"可能是一个HTML文件名,代表网页的主入口,...

    css使图片变灰的实现方法

    综上所述,实现图片变灰的方法大致有几种: 1. 制作两张图片:一张正常色彩,一张灰度色彩,并在需要时替换显示。 2. 利用CSS的`filter: grayscale()`属性,但只兼容IE浏览器。 3. 对于Firefox及其他不支持`filter: ...

    简洁的邮件CSS模板_简洁 邮件 邮箱 灰色.zip

    因此,一个良好的邮件CSS模板需要考虑到兼容性和响应性。在这个模板中,可能包含了以下关键知识点: 1. **基础CSS语法**:模板使用CSS来设置字体、颜色、边距、填充、布局等样式。例如,使用`color`、`font-family`...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典...

    灰色商务CSS网页模板

    在这个模板中,HTML和CSS的结合使用,使得网页的代码结构清晰,易于维护,同时也能确保在不同设备和浏览器上的良好兼容性。 "chahua2295"可能是压缩包内的主文件或文件夹名,通常包含HTML文件、CSS文件和其他相关...

    黑灰色简约大气网站css模板

    ie_fixes.css则专门针对Internet Explorer浏览器的兼容性问题进行修复。 在压缩包的文件名列表中,我们看到以下几个HTML文件: 1. archives.html:这可能是归档页面的模板,用于展示网站的过往内容。 2. index....

Global site tag (gtag.js) - Google Analytics