CSS3的滤镜效果(-webkit-filter)
博客专区 > Rickxue 的博客 > 博客详情
CSS3的滤镜效果(-webkit-filter)
Rickxue 发表于2年前
CSS3的滤镜效果(-webkit-filter)
  • 发表于 2年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: -webkit-filter是css3的一个属性,它能通过通过设定不同属性,来做到不用ps就能做到:高斯模糊,调整灰度值,对比度,亮度等等效果。这样对于一张图片,如果你希望因为不同的状态而想要得到这张图片的不同图片效果的话,就不用再另外做一张图片,来进行两张图片之间的相互转换。通过一个css3属性就能完成。

    -webkit-filter是css3的一个属性,它能通过通过设定不同属性,来做到不用ps就能做到:高斯模糊,调整灰度值,对比度,亮度等等效果。这样对于一张图片,如果你希望因为不同的状态而想要得到这张图片的不同图片效果的话,就不用再另外做一张图片,来进行两张图片之间的相互转换。通过一个css3属性就能完成。

    通过-webkit-filter的滤镜效果,对图片来进行效果控制,对页面浏览性能,效果变换性能都有很大的提升。

   -webkit-filter:现在规范中支持的效果有:

  • grayscale 灰度               值为0-1之间的小数 

  • sepia 褐色         值为0-1之间的小数

  • saturate 饱和度     值为num

  • hue-rotate 色相旋转  值为angle(deg)

  • invert 反色        值为0-1之间的小数

  • opacity 透明度     值为0-1之间的小数

  • brightness 亮度     值为0-1之间的小数

  • contrast 对比度     值为num

  • blur 模糊           值为length

  • drop-shadow 阴影

 这里展示下阴影的效果,其他效果可自己尝试!

  -webkit-filter:drop-shadow(10px 10px 10px #000)

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 5
博文 34
码字总数 12890
评论 (0)
×
Rickxue
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: