`
xiaoluode
  • 浏览: 14461 次
  • 来自: 深圳
社区版块
存档分类
最新评论

使用CSS将图片转换成黑白(灰色、置灰)

阅读更多


 CSS3 greyscale 滤镜实现

 

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

 

 

SVG滤镜实现

我们新建一个空白文本文件,比如说:gray.txt. 拷贝进去如下的XML代码:

<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 0 0 0 1 0"/>
    </filter>
</svg>

 然后,修改后缀.txt → .svg. 然后就可以调用了~~

如下CSS调用代码:

filter: url(gray.svg#grayscale);

 然后,效果就出来了。

别忘了IE浏览器

IE下实现上面已经提过,就是:

filter: gray;

 至少IE7~9都是支持的。

 

转载来自http://www.zhangxinxu.com/wordpress/?p=2547

  • 大小: 21.3 KB
分享到:
评论

相关推荐

    使整个页面变灰 样式代码

    在网页设计与开发过程中,有时候我们需要将整个网页变成灰度模式,例如在纪念日或哀悼活动中,网站可能会选择将色彩丰富的图片转换成黑白灰度效果,以此表达敬意或哀思。本文将详细介绍如何通过简单的CSS代码实现...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    49.jquery相册播放器插件实现无序图片列表转换成有序并播放 50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    如何把我们的网站变成黑白色或是灰色

    在网页设计中,有时为了表示哀悼、纪念或者创建特定的视觉效果,我们可能需要将网站变为黑白色或灰色调。本文将介绍五种方法,教你如何通过CSS(层叠样式表)技术轻松实现这一目标。 1. 修改CSS文件: 这是最常见...

    全国哀悼日网站页面变成灰色的filter方法

    在CSS中,为了将整个页面转换为灰度,可以在页面的CSS文件中添加特定的滤镜属性。例如,代码`body{filter: grayscale(100%);}`或`html{filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}`都可以...

    网站变黑白JS

    // 将颜色转换为灰色 var grayColor = grayscale(originalColor); var grayBackgroundColor = grayscale(originalBackgroundColor); element.style.color = grayColor; element.style.backgroundColor = ...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    100多个JQuery效果示例(实例)div+css+javascrpit

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    novoBw:具有黑白布局的新吉尔玛网站

    可以使用滤镜(`filter`)将图片转换为黑白,或者选择本身就适合黑白主题的矢量图形。 8. **辅助色**:虽然主色调是黑白,但可以适量引入深灰或浅灰作为辅助色,以增加视觉层次和引导用户注意力。 通过以上步骤,...

    css3的过滤效果简单实例

    1. **灰度滤镜**:通过`grayscale()`函数将图片转换为黑白色调。值范围是0(无效果)到1(完全灰度),在这个实例中我们设为1。 ```css #div1 img { width: 100%; -webkit-filter: grayscale(1); } ``` 2. *...

    31透明图片的设置及叠加.rar_图片叠加_透明图片的

    使用`&lt;img&gt;`标签插入图片,并通过CSS的`opacity`属性控制透明度,或者使用`background-image`和`background-blend-mode`属性实现图片叠加。 - 在HTML5中,`&lt;canvas&gt;`元素也可以用于动态地创建和操作透明图片,包括...

    jquery 动态示例

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    Grayvee-crx插件

    这款插件采用的图标很可能也是为了体现其核心功能——将彩色变为灰色。 总的来说,"Grayvee-crx插件"是一款实用的工具,尤其适合需要长时间保持专注的用户。通过将网页转变为灰度模式,它能够减少视觉噪音,提升...

Global site tag (gtag.js) - Google Analytics