CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器
CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果。
方式1. IE滤镜
IE系列浏览器都支持IE滤镜的这一属性,非IE浏览器不支持。
方式2. CSS3滤镜
CSS3滤镜目前还不属于标准属性,现在暂时只有Google Chrome浏览器支持,其他浏览器均不支持
CSS实现灰度效果可以让网页更加容易实现一些特效,还记得纪念5.12大地震国内很多网页在一夜之间全部变成灰色吗?给网站加上下面的样式就可以轻松实现:
有人肯定要说了CSS实现灰度效果虽好,但不能做到兼容全部浏览器呀,怎么办呢?CSS做不到的事情,大家肯定会想到用JS来实现,下面给大家推荐一款JS灰度效果插件:
使用方法:
兼容所有浏览器,执行后会在元素上加入很多行内样式,如果你对兼容性要求不高的话建议使用CSS实现灰度效果。
CSS 实现图片灰度效果 兼容各种浏览器的更多相关文章
- CSS 实现图片灰度效果
非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...
- css hover图片hover效果兼容ie8
例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DIV以及图片水平垂直居中兼容多种浏览器
纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈 第一种:全CSS控制 ...
- css 改变图片灰度颜色
我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异 ...
- css 实现图片灰度
先看效果鼠标移入图片中摁下向左移动 图片由灰度变为原图 向右移动原图变灰度 代码如下:尚未做优化 <style> *{ margin:0; padding:0; } #img{ w ...
- CSS美化 input type=file 兼容各个浏览器(转)
HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...
- css实现图片闪光效果
1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加 ...
- iOS 加载本地 HTML 文件 CSS 样式图片无效果
在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...
随机推荐
- Oracle 批量造数据
1.通过存储过程方式 CREATE OR REPLACE procedure XXZY.p_test is i number; begin .. loop INSERT INTO test_job V ...
- JavaWEB开发中的/到底代表什么
- 深入剖析哪些服务是Oracle 11g必须开启的
这篇文章主要介绍了哪些服务是Oracle 11g必须开启的以及这些服务的详细介绍,需要的朋友可以参考下 成功安装Oracle 11g数据库后,你会发现自己电脑运行速度会变慢,配置较低的电脑甚至出现 ...
- python Unicode转ascii码的一种方法
缘起 看到这样的数据:Marek Čech.Beniardá怎样变成相对应的ascii码呢 解决 import unicodedata s = u"Marek Čech" #(u表 ...
- Android开发小记
一,下载解压adt-bundle,直接可以用来开发了二,新建android项目时不勾选创建activity,来看看如何手动创建activity1,在空项目添加class文件,选择超类为activity ...
- HDU 1358 Period KMP
题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=1358 求周期问题,简单KMP—— AC代码: #include <iostream> # ...
- java程序获得SqlServer数据表的表结构
/** * 取得一张表的结构信息 * 使用DatabaseMetaData与ResultSetMetaData结合的方式获取全部属性 * @param conn 数据连接 * @p ...
- 建立&修改视图
一.建立视图 IF OBJECT_ID('Sales.OrderTotalsByYear', 'V') IS NOT NULL DROP VIEW Sales.OrderTotalsByYear; G ...
- HTML5 DTD
HTML5/HTML 4.01/XHTML 元素和有效的 DTD 下面的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素,以及它们会出现在什么文档类型 (DTD) 中: 标签 HTM ...
- js正则表达式的使用
正则表达式的常用字符: 符号 描述 /../ 代表一个模式的开始和结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 \s 任何空白字符 \S 任何非空白字符 \d 匹配一个数字字符,等价于[1-9 ...