加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

CSS 使图片变灰的实例

发布时间:2018-09-05 11:13:52 所属栏目:创业 来源:站长网
导读:最近项目中遇到个问题,就是要使图片变灰。我想了几种解决方案。 1 一种是图片之间的替换,也就是将正常的图片再做成灰色的。这种方法应该是最稳定的了, 但是就要花费时间去做多余的那些图片了。应该算是比较费事的那种,程序员嘛,都比较懒, 喜欢让计算

  最近项目中遇到个问题,就是要使图片变灰。我想了几种解决方案。

  1 一种是图片之间的替换,也就是将正常的图片再做成灰色的。这种方法应该是最稳定的了,

  但是就要花费时间去做多余的那些图片了。应该算是比较费事的那种,程序员嘛,都比较懒,

  喜欢让计算机干更多的事情。

  2 于是又想到了第二种,就是用css来解决问题,上网一搜还真有。 将“filter:gray;”添加到图片的样式中就可以了。

  这是应用了滤镜的效果。

  

CSS 使图片变灰的实例

  对于IE用户这个问题是解决了,但在firefox下就不起作用了。问题在于IE有滤镜的支持,而firefox就没有。

  后来只能是在firefox下将图片半透明显示,也能起到满意的效果。

CSS 使图片变灰的实例

  "filter:gray; -moz-opacity:.1;opacity:0.1;"

  这行代码在IE下图片变为灰色,在firefox下半透明显示。

  filter:gray 这个属性只有IE支持,-moz-opacity这个属性firefox低版本支持,opacity高版本支持

  ”filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;“

  这行代码在IE和firefox下都半透明显示 。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读