CSS-滤镜 -webkit-filter

css滤镜属性，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。

语法：

默认值：none

blur(<number>px) : 设置对象的模糊效果。（数值越大，对象越模糊）

brightness(<percentage>) : 设置对象的亮度。除百分比外，也可以用非负数表达。（百分数越大，对象越亮）

contrast(<percentage>) : 设置对象的对比度。除百分数外，也可以用0-1的数字表达。

grayscale(<percentage>) : 设置对象的灰度。除百分比外，也可以用0-1的数字表达。

hue-rotate(<percentage>deg) : 设置对象的色相旋转。用0-360数字表达。

invert(<percentage>) : 设置对象的反色。除了百分比外，也可以用0-1的数字表达。

opacity(<percentage>) : 设置对象的透明度。除了百分比外，也可以用0-1的数字表达。

saturate(<percentage>) : 设置对象的饱和度。除了百分比外，也可以用非负数表达。

sepia(<percentage>) : 设置对象的褐色程度。除了百分比外，也可以用0-1的数字表达。

drop-shadow(<length><length>radius<color>) : 设置对象的阴影。第一个长度是向右偏移距离，第二个长度是向下偏移距离，皆可为负值，皆为必传参数；第三个是阴影圆角，可选；第四个是阴影颜色，可选。

url(path.svg#a) : 设置对象滤镜效果。通过SVG可实现以上所有效果。SVG可写在页面里，也可外部引用。可增加锚节点。

转载于:https://www.cnblogs.com/liuqingxia/p/7803744.html

CSS-滤镜 -webkit-filter相关推荐

CSS——滤镜（filter ）
目录前言一.什么是滤镜二.滤镜的实现---filter属性 1.CSS语法 2.常用的滤镜函数 3.格式 (1).一个图片给一个属性 (2).同一个元素使用多个滤镜效果,只需要将每个滤镜函数使用 ...
css显示内容越来越模糊_纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色.或者是hover的时候,对图片的对比度, ...
html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
html filter 作用,css滤镜有什么作用？
滤镜主要是用来实现图像的各种特殊效果:它在Photoshop中具有非常神奇的作用.而在CSS3中,对各种滤镜效果已经有了支持,可以做出很多效果. css滤镜的标识符是"filter" ...
【css滤镜】高级属性filter
概述 2022年11月30日江老去世,然后我们发现各大网站和app首页都变成了灰色.还有一些特殊的日子,我们经常见到网站首页变灰色,作为一个前端开发者肯定会有好奇的同志,其实很简单,只要一个css属性 ...
html滤镜无效果,为什么css滤镜(filter属性)没用？
为什么css滤镜(filter属性)没用?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 滤镜filter属性,可以对网页中的图片进行类似Photosho ...
火狐谷歌chrome等浏览器支持一些css滤镜
问题: filter:alpha(opacity=60)只在IE起作用,火狐.谷歌不支持解决方法: 将原有的"filter:alpha(opacity=60)&qu ...
CSS滤镜和精灵技术
CSS滤镜和精灵技术目录 CSS滤镜和精灵技术一.CSS滤镜(Filters) 二.CSS精灵技术(sprite) 一.CSS滤镜(Filters) CSS3 滤镜是对图像等图形元素执行视觉效果操 ...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
html图片加波浪滤镜,CSS滤镜wave属性(波形滤镜)
[实例介绍] CSS滤镜wave属性(波形滤镜) wave滤镜用来把对象按照垂直的波纹样式打乱.waVe的表达式还是比较复杂的,它一共有5个参数. [基本语法] filter:wave(add=参数值 ...

CSS-滤镜 -webkit-filter

CSS-滤镜 -webkit-filter相关推荐

最新文章

热门文章