在CSS中编辑图像:过滤器

考虑一种情况,您的网站上必须具有高对比度,模糊或明亮的特定图像版本。 在使用CSS过滤器之前,您唯一的选择是上传这些图像的不同版本或使用JavaScript处理图像。

除非您要操纵原始图像中的像素,否则CSS过滤器将提供一种简单的方法。 让我们从本教程开始,简要讨论所有可用的过滤器。

模糊滤镜

此滤镜将对图像应用高斯模糊。 您将必须提供一个长度值,该值将确定需要混合多少像素。 这意味着更大的值将提供更模糊的图像。 请记住,您不能使用百分比来确定模糊半径。 如果未指定参数,则使用值0。 使用此过滤器的正确语法是:

filter: blur( <length> )

blur()过滤器不接受负值。

CSS模糊滤镜效果

亮度滤镜

该滤镜会将线性倍增器应用于您的图像,从而使它们比原始图像更亮或更暗。 它接受数字和百分比值。 设为0%时,您将获得全黑图像。 100%的原始图像没有任何变化。 值越高,图像越亮。 足够高的值会使图像大部分变为白色。 使用此过滤器的正确语法是:

filter : brightness( [ <number> | <percentage> ] )

此过滤器也不接受任何负值。

CSS亮度滤镜效果

对比滤镜

此滤镜可改变图像的对比度。 就像亮度过滤器一样,它接受数字和百分比值。 值为0%将产生完全灰色的图像。 将该值设置为100%无效。 高于100%的值将产生高对比度的图像。 不允许您在contrast()过滤器中使用负值。 使用此过滤器的正确语法是:

filter : contrast( [ <number> | <percentage> ] )<
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值