HOOOS

网页变灰、黑白的的代码示例 HTML CSS filter

1 1145 前端 网页HTMLCSS编程
Apple

在HTML中让网页变黑白、变灰有一个最佳的解决方案,就是通过CSS来调整。

在CSS3中有一个属性filter,翻译中文过滤器的意思,开源调整网页元素包括图像的效果。

网页灰色黑白

这样使整个页面的灰度100%,也就变成灰色、黑白的感觉,对图片也有效。

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

也可以只对部分元素操作,包括图片:

div img {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
}

加上-webkit- -moz- -ms- -o- 是为了兼容不同浏览器。

CSS3 filter

filter 属性定义元素(通常是 )的视觉效果(如模糊和饱和度)。

默认值: none
继承:
动画制作: 支持。
版本: CSS3
JavaScript 语法: object.style.filter="grayscale(100%)"

滤镜函数

注释:使用百分比值(例如 75%)的滤镜,也接受该值是十进制(例如 0.75)。

滤镜 描述
none 默认值。规定无效果。
blur(px) 对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值,则使用 0。
brightness(%) 调整图像的亮度。* 0% 将使图像完全变黑。* 默认值是 100%,代表原始图像。* 值超过 100% 将提供更明亮的结果。
contrast(%) 调整图像的对比度。* 0% 将使图像完全变黑。* 默认值是 100%,代表原始图像。* 超过 100% 的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color) 对图像应用阴影效果。可能的值:* h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。* v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。blur -可选。这是第三个值,单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多(阴影会变得更大更亮)。不允许负值。如果未规定值,会使用 0(阴影的边缘很锐利)。spread - 可选。这是第四个值,单位必须用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。如果未规定值,会使用 0(阴影与元素的大小相同)。注释:Chrome、Safari 和 Opera,也许还有其他浏览器,不支持第 4 个长度;如果添加,则不会呈现。color - 可选。为阴影添加颜色。如果未规定,则颜色取决于浏览器(通常为黑色)。这个例子创建了红色的阴影,水平和垂直方向均为 8px,带有 10px 的模糊效果:filter: drop-shadow(8px 8px 10px red);提示:这个滤镜类似 box-shadow 属性。
grayscale(%) 将图像转换为灰阶。* 0% (0) 是默认值,代表原始图像。* 100% 将使图像完全变灰(用于黑白图像)。注释:不允许负值。
hue-rotate(deg) 在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg,代表原始图像。注释:最大值是 360deg。
invert(%) 反转图像中的样本。* 0% (0) 是默认值,代表原始图像。* 100%将使图像完全反转。注释:不允许负值。
opacity(%) 设置图像的不透明度级别。opacity-level 描述了透明度级别,其中:* 0% 为完全透明。* 100% (1) 是默认值,代表原始图像(不透明)。注释:不允许负值。提示:这个滤镜类似 opacity 属性。
saturate(%) 设置图像的饱和度。* 0% (0) will make the image completely un-saturated.* 100% is default and represents the original image.* Values over 100% provides super-saturated results.注释:不允许负值。
sepia(%) 将图像转换为棕褐色。* 0% (0) 是默认值,代表原始图像。* 100% 将使图像完全变为棕褐色。注释:不允许负值。
url() url() 函数接受规定 SVG 滤镜的 XML 文件的位置,并且可以包含指向特定滤镜元素的锚点。实例:filter: url(svg-url#element-id)
initial 将此属性设置为其默认值。
inherit 从其父元素继承此属性。

点评评价

captcha
  • 小祺先生

    还有一个的写法:

    ```css
    filter: url(data:image/svg+xml;utf8,<svg xmlns=&#39;http://www.w3.org/2000/svg\'><filter id=&#39;grayscale&#39;><feColorMatrix type=&#39;matrix&#39; values=&#39;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&#39;/></filter></svg>#grayscale);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
    ```

健康