CSS实现图片变灰色及透明度
【图片变灰】
每当遇到哀悼日,很多网站快速变灰色,来看看实现方式吧:
方式一,仅支持ie)
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
方式二,适合小页面,仅支持ie)
body {filter:gray}
方式三,仅支持ie与chrome)
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
方式四,支持所有浏览器)
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
grayscale(document.body);
}
</script>
推荐方式:方法三 > 方法四 > 方法一 > 方法二
推荐原因:方法三虽不支持firefox,但稳定,速度快,占用资源小!
【图片透明】
接下来,来说说图片透明,直接看代码:
filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;
说明:
第一个属性(filter)仅支持ie;
第二个属性(-moz-opacity)对firefox低版本支持
第三个属性(opacity)对firefox高版本支持
CSS实现图片变灰色及透明度的更多相关文章
- css控制图片变灰色,彩色
<A href="链接地址"><IMG src="p1.jpg" border="0"></A> < ...
- css 把图片变成灰色
3.14号刚下班,噩耗传来,伟大的物理学家斯蒂芬·威廉·霍金去世了. 同事正好叫我吃饭,几分钟内去看了一眼百度百科,一看也都变黑白了,可是查看图片还是彩色的,也是哪有这么快的时间来p图呢,回来搜了一下 ...
- CSS使图片变灰
为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...
- 通过CSS让图片变的清楚
image { width: 100%; height: 100%; border-radius: 10upx; //让图片变清楚 image-rendering: -moz-crisp-edges; ...
- css 网站变灰色
网站变灰色 html{ -webkit-filter: grayscale(%); -webkit-filter: grayscale(); filter: grayscale(%); filter: ...
- 纯css实现图片或者页面变灰色
前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- js使用CSS将图片转换成黑白(灰色、置灰)
详细内容请点击 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的. 不过,时代发展,如今,CSS3的逐步推进,我们也开始 ...
随机推荐
- http协议简述
HTTP协议 客户端连上web 服务器后,若想获得 web 服务器中的某个 web 资源,需遵守一定的通讯格式, HTTP 协议用于定义客户端与 web 服务器通迅的格式. WEB浏览器与 WEB 服 ...
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- Linux命令行下编译Android NDK的示例代码
这几天琢磨写一个Android的Runtime用来加速HTML5 Canvas,让GameBuilder+CanTK 不但开发速度快,运行速度也能接近原生应用.所以花了点时间研究 Android ND ...
- 有用的dede表单代码
<form action="" class="demoform"> <table> ...
- 【bzoj3771】【xsy1728】Triple
[bzoj3771][xsy1728] 题意 求\(\sum_{i}[a_i=S]+\sum_{i<j}[a_i+a_j=S]+\sum_{i<j<k}[a_i+a_j+a_k=S] ...
- python 练习 5
#!/usr/bin/python # -*- coding: utf-8 -*- from collections import deque def z69(): '''猜牌术(1) 魔术师,最上面 ...
- Qt之资源系统
简述 Qt 的资源系统用于存储应用程序的可执行二进制文件,它采用平台无关的机制.当你的程序总需要这样的一系列文件(图标.翻译文件等)并且不想冒丢失某些文件的风险时,这就显得十分有用. 资源系统基于 q ...
- IO流--文件处理
import java.io.*; public class io { public static void main(String[] args) { ListDemo(); File dir = ...
- SQL的常用语句
select * from g_members where id between '16' and '31' order by id desc 倒序排列 select * from g_members ...
- spring集成环境下的axis webservice的发布,调试
在spring集成的环境下,无论你是ssh集成,还是ssi集成的情况下,发布webservice往往在调用的时候会出错. 特别是,如果你是这个方式: 将webservice打aar包,放到tomcat ...