展会信息港展会大全

怎么让页面变灰实现代码 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:28:33   浏览:2049次  

导读:我们最常用的一种让页面变灰就是利用ie滤镜,现在很多网站仅仅是在IE浏览器中用了滤镜来解决,并没有去处理其他浏览器的,本文章来讲述可兼容多浏览器的办法。CSS1代码如下复制代码...

我们最常用的一种让页面变灰就是利用ie滤镜,现在很多网站仅仅是在IE浏览器中用了滤镜来解决,并没有去处理其他浏览器的,本文章来讲述可兼容多浏览器的办法。

CSS1

代码如下

复制代码

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

今天发现其实也可以让Firefox和Chrome变成灰色,不过Opera和Safari没成功,暂时先不理会,有一点东西就先跟大家分享。首先来看一下正常的页面好多漂亮的彩图;再看一下我把源码下载,添加了一行CSS样式后的效果(点这里查看)。

代码如下

复制代码

html {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#grayscale);

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(1);

}

大面积的操作降低页面性能是肯定的,这里分享这个也只是想跟大家说一下,最近我看到这个样式,感觉太厉害了。在这个样式代码中,涉及到了一个文件,就是desaturate.svg,从文件扩展名中可以看到,利用到了SVG技术了,代码如下:

代码如下

复制代码

<svg version="1.1" 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

0001 0"/>

</filter>

</svg>

只需要将这代码保存为desaturate.svg,再通过url链接就可以了,十分简单。在前面看到的demo页面中是在body中增加了样式,影响页面中所有的元素,如果有需要的话,可以单独设置一个公共库中的类名来调用,如:

代码如下

复制代码

.pic_gray {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#grayscale);

filter: gray;

-webkit-filter: grayscale(1);

}

这样操作的话,可以让某个区域变成灰色,一切尽在你的掌握。

国外网站参考

The CSS3 greyscale filter

Desaturating a color image couldn’t be simpler with CSS3. We’ll apply the filter as a class, as you’d typically desire several images to be affected by the code at the same time:

代码如下

复制代码

img.desaturate { filter: grayscale(100%); }Naturally, all current browsers implement CSS3 filters via vendor prefixes, so our first job is to insert that code, writing in CSS that does not yet exist in order to future-proof our work:

img.desaturate { filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}Applying the class to the image is easy:

代码如下

复制代码

<img src=lena-sderberg.png alt="Lena Sderberg" style=width:512px;height:512px class=desaturate>

Add An SVG Filter Effect

The CSS shown to this point works only in Chrome 18+, with support in other browsers expected to arrive soon. To gain the same effect in Firefox 4+, we need to use an SVG filter, which I’ll create as a separate document named desaturate.svg. The code for that file will be:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="greyscale"><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 0001 0"/> </filter> </svg>If the SVG code looks slightly daunting – and the matrix math behind it is somewhat complex – don’t worry. This is one piece of code that I’d actually encourage you to copy and paste as a generic “recipe”. I’ll explain matrix transformations in a future article.

With the SVG file saved beside our HTML page and test image, we will extend the CSS to become:

代码如下

复制代码

img.desaturate{

filter: grayscale(100%);

-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);

-ms-filter: grayscale(100%); -o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

}

Add Support for IE

So far our code covers future browsers, recent versions of Chrome and Firefox 4+. To include IE 6 – 9, we'll apply Microsoft’s simple but proprietary use of filter:

代码如下

复制代码

img.desaturate{

filter: grayscale(100%);

-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);

-ms-filter: grayscale(100%); -o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);filter: gray;}

If you want to add in support for older versions of Webkit:

代码如下

复制代码

img.desaturate{

filter: grayscale(100%);

-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);

-ms-filter: grayscale(100%); -o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);filter: gray;

-webkit-filter: grayscale(1);

}

Unfortunately Safari and Opera are still left out of the picture, but Safari 5.2 – due to be released very soon – should support the –webkit CSS3 filter prefix, and Opera’s support for CSS3 is continuing to improve.

Note

If you wanted to achieve the same visual result across absolutely every browser (assuming your visitors were running JavaScript) you could use Desaturate with JQuery or Greyscale.js to modify your images.

The CSS we've written here allows us to visually convert an image to black and white on the fly in our browser, with no need to save new versions in PhotoShop. Using CSS also makes the image much easier to modify: for example, you’ll see that lowering the percentage used in our declaration from 100% to 50% causes a visual blend of the desaturation effect with the original color image.

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港