【Html】20 - CSS3滤镜效果

CSS3滤镜效果

filter

   <div>
       <img src="./1.jpg">
   </div>

filter:brightnegs()属性值

filter: brightness(倍数)

• 亮度

当倍数值( n )大于1的时候元素会变亮，小于1的时候元素会变暗;

该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用

filter: brightness(1.5)

filter: brightness(0.5)

filter:contrast()属性值

filter: contrast(百分比)

• 对比度

  简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白

filter: contrast(50%)

filter: contrast(150%)

filter: blur()属性值

filter: blur(模糊半径)

• 模糊度

  给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊

filter: blur(10px)

filter: grayscale()属性值

filter: grayscale(百分比)

• 灰度

  该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。

  圆括号里面的值定义转换的比例。

  值为100%则完全转为灰度图像；

  值为0%图像无变化；

  值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

filter: grayscale(20%)

filter: grayscale(100%)

filter: sepia()属性值

filter: sepia(百分比)

• 褐色

  该属性的作用同上，都是将某个区域的颜色进行简化；

  该属性会将一个颜色丰富的区域变成一种老黑白照片效果，让图片有一种轻微泛黄的样子

filter: sepia(50%)

filter: sepia(150%)

filter:drop-shadow()属性值

filter:drop-shadow(x轴偏移 y轴偏移 模糊范围 颜色)

• 阴影

  与box-shadow相似

filter: drop-shadow(2px 2px 6px #000)

filter: invert()属性值

filter: invert(百分比)

• 函数反转输入图像

  100% 的价值是完全反转。

  值为 0% 则图像无变化。若值未设置值，默认为 0。

filter: invert(20%)

filter: invert(70%)

filter: hue-rotate()属性值

filter: hue-rotate(角度)

• 色相旋转

  角度设定图像会被调整的色环角度值。

  值为 0deg，则图像无变化。

  若值未设置值，默认为 0deg。

  该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。

filter: hue-rotate(180deg)

filter: opacity()属性值

filter: opacity(百分比)

• 透明度

  值为 0% 则是完全透明，

  值为 100% 则图像无变化。

  若值未设置，值默认是100%。

filter: opacity(50%)

filter: saturate()属性值

filter: saturate(百分比)

• 饱和度

  值为 0% 则是完全不饱和，

  值为 100% 则图像无变化。

  若值未设置，值默认是100%。

filter: saturate(50%)

---

END