您现在的位置是：网站首页> 编程资料编程资料

css3 filter属性的使用简介CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码css中filter属性和backdrop-filter的应用与区别详解详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用使用css的filter写鼠标滑过效果的实现示例CSS filter 有什么神奇用途

2021-09-02 1028人已围观

简介 这篇文章主要介绍了css3 filter属性的使用简介，帮助大家更好的理解和学习使用css3，感兴趣的朋友可以了解下

一、前言

在编写前端页面的动画效果时，或多或少会用到 filter 属性，由于其属性值过多，故本篇用于整理和记录其相关资料。

二、介绍

filter属性定义了元素(通常是)的可视效果。

属性值如下：

属性值描述
none默认值，没有效果。
blur(px)给图像设置高斯模糊，则默认值是 0。
brightness(%)给图片应用一种线性乘法，使其看起来更亮或更暗，默认值是 1。
contrast(%)调整图像的对比度，默认值是 1。
grayscale(%)将图像转换为灰度图像，默认值是 0。
hue-rotate(deg)给图像应用色相旋转，默认值是 0deg。
invert(%)反转输入图像，默认值是 0。
opacity(%)转化图像的透明程度，默认值是 1。
saturate(%)转换图像饱和度，默认值是 1。
sepia(%)将图像转换为深褐色，默认值是 0。

注意：滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

三、演示代码

Document
点击左侧属性显示效果
  • filter: blur(5px)
  • filter: brightness(.5)
  • filter: contrast(.5)
  • filter: grayscale(1)
  • filter: hue-rotate(90deg)
  • filter: invert(.4)
  • filter: opacity(.4)
  • filter: saturate(.5)
  • filter: sepia(.5)
原图
效果图

以上就是css3 filter属性的使用简介的详细内容，更多关于css3 filter属性的资料请关注其它相关文章！

上一篇：CSS3点击按钮圆形进度打钩效果的实现代码CSS3.0实现霓虹灯按钮动画特效的示例代码

下一篇：html+css合并表格边框的示例代码HTML table 表格边框的实现思路html做表格只显示表格的外边框有关HTML表格边框的设置小技巧CSS实现表格细边框的两种方法css控制表格细边框样式表格边框以虚线显示的css样式ie6 表格td中无内容时不显示边框的解决办法HTML table表格边框的控制详细说明用CSS设置表格Table的细边框的比较好用的方法 HTML表格边框的控制实现代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网