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都是支持的。
相关推荐
在网页设计与开发过程中,有时候我们需要将整个网页变成灰度模式,例如在纪念日或哀悼活动中,网站可能会选择将色彩丰富的图片转换成黑白灰度效果,以此表达敬意或哀思。本文将详细介绍如何通过简单的CSS代码实现...
49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...
49.jquery相册播放器插件实现无序图片列表转换成有序并播放 50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播...
在网页设计中,有时为了表示哀悼、纪念或者创建特定的视觉效果,我们可能需要将网站变为黑白色或灰色调。本文将介绍五种方法,教你如何通过CSS(层叠样式表)技术轻松实现这一目标。 1. 修改CSS文件: 这是最常见...
在CSS中,为了将整个页面转换为灰度,可以在页面的CSS文件中添加特定的滤镜属性。例如,代码`body{filter: grayscale(100%);}`或`html{filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}`都可以...
// 将颜色转换为灰色 var grayColor = grayscale(originalColor); var grayBackgroundColor = grayscale(originalBackgroundColor); element.style.color = grayColor; element.style.backgroundColor = ...
49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...
49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...
可以使用滤镜(`filter`)将图片转换为黑白,或者选择本身就适合黑白主题的矢量图形。 8. **辅助色**:虽然主色调是黑白,但可以适量引入深灰或浅灰作为辅助色,以增加视觉层次和引导用户注意力。 通过以上步骤,...
1. **灰度滤镜**:通过`grayscale()`函数将图片转换为黑白色调。值范围是0(无效果)到1(完全灰度),在这个实例中我们设为1。 ```css #div1 img { width: 100%; -webkit-filter: grayscale(1); } ``` 2. *...
使用`<img>`标签插入图片,并通过CSS的`opacity`属性控制透明度,或者使用`background-image`和`background-blend-mode`属性实现图片叠加。 - 在HTML5中,`<canvas>`元素也可以用于动态地创建和操作透明图片,包括...
49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...
这款插件采用的图标很可能也是为了体现其核心功能——将彩色变为灰色。 总的来说,"Grayvee-crx插件"是一款实用的工具,尤其适合需要长时间保持专注的用户。通过将网页转变为灰度模式,它能够减少视觉噪音,提升...