滤镜"/>
css Filter 滤镜
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
filter 函数
除特殊说明外,函数的值如果接受百分比值(如 34%),那么该函数也接受小数值(如 0.34)。
- blur() 模糊
- brightness() 亮度
- contrast() 对比度
- drop-shadow() 阴影
- grayscale() 灰度
- hue-rotate() 色相旋转
- invert() 反色
- opacity() 透明度
- saturate() 饱和度
- sepia() 褐色(有种复古的旧照片的感觉)
/* URL to SVG filter */
filter: url("filters.svg#filter-id");/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);/* Multiple filters */
filter: contrast(175%) brightness(3%);/* Use no filter */
filter: none;/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;
blur()
blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值,或者屏幕上有多少像素相互融合,因此,较大的值将产生更多的模糊。若没有设置值,默认为 0。该参数可以指定为 CSS 长度,但不接受百分比值。
filter: blur(5px)
brightness()
brightness() 函数将线性乘法器应用于输入图像,使其看起来或多或少地变得明亮
filter: brightness(2)
contrast()
contrast() 函数可调整输入图像的对比度。值是 0% 的话,图像会全黑。值是 100%,图像不变。值可以超过 100%,意味着会运用更低的对比。若没有设置值,默认是 1。
filter: contrast(200%)
drop-shadow()
drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的,以特定颜色画出的遮罩图的偏移版本,最终合成在图像下面。函数接受 (在 CSS3 背景中定义)类型的值,除了 inset 和 spread 关键字。该函数与已有的 box-shadow 属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。
filter: drop-shadow(16px 16px 10px black)
grayscale()
grayscale() 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像,值为 0% 图像无变化。值在 0% 到 100% 之间,则是效果的线性乘数。若未设置值,默认是 0。
filter: grayscale(100%)
hue-rotate()
hue-rotate() (en-US) 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg,则图像无变化。若值未设置值,默认为 0deg。该值虽然没有最大值,超过 360deg 的值相当于又绕一圈。
filter: hue-rotate(90deg)
invert()
invert() (en-US) 函数反转输入图像。amount 的值定义转换的比例。值为 100% 则图像完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间,则是效果的线性乘数。若未设置值,则默认为 0。
filter: invert(100%)
opacity()
opacity() 转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明,值为 100% 则图像无变化。值在 0% 和 100% 之间,则是效果的线性乘数。也相当于图像样本乘以数量。若未设置值,则默认为 1。该函数与已有的 opacity 属性很相似,不同之处在于通过 filter,一些浏览器为了提升性能会提供硬件加速。
saturate()
saturate() (en-US) 函数转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和,值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。若未设置值,则默认为 1。
filter: saturate(200%)
sepia()
sepia() (en-US) 函数将图像转换为深褐色。amount 的值定义转换的比例。值为 100% 则完全是深褐色的,值为 0% 图像无变化。值在 0% 到 100% 之间,值是效果的线性乘数。若未设置值,则默认为 0。
filter: sepia(100%)
更多推荐
css Filter 滤镜
发布评论