CSS中的filter(滤镜)

CSS中的filter(滤镜)CSS中的filter(滤镜)

滤镜通常是使用百分比(如:88%),也可以使用小数点(如:0.88);

某些属性跟原有的CSS中的属性十分相似,但有些浏览器为了提升性能,会通过filter提供硬件加速。

以下都是filter的属性:

  • 灰度(grayscale)

将图像转换为灰度图像(置灰)。0%图像五百年话,100%图像完全转为灰度

filter: grayscale(100%);

<div class="box">我就是一个盒子</div>
<button id="btn">置灰</button>
.box { 
   
      width: 200px;
      height: 200px;
      background-color: red;
      margin-bottom: 10px;
      text-align: center;
      line-height: 200px;
}
let btn = document.querySelector('#btn');
let box = document.querySelector('.box');
btn.addEventListener('click', function () { 
   
    box.style.filter = 'grayscale(100%)';
})

这样点击按钮之后,box盒子就会完全置灰。

  • 阴影(drop-shadow)

阴影是合成在图像下面的,可以有模糊度,也可以用特定的颜色画出遮罩图

drop-shadow(offset-x offset-y blur color)
/** offset-x 必须,阴影的左右位置 offset-y 必须,阴影的上下位置 blur 阴影的模糊值 color 阴影的颜色 **/
  • 亮度(brightness)

把图片变得更亮或者更暗。

filter: brightness(100%)
/** 0% 图像会全黑 100% 图像无变化,发现100%刚好是可以把前面置灰后的图像还原 >100% 图像回比原来的更鲜明 **/
  • 透明度(opacity)

转化图像的透明程度。

filter: opacity(30%);
/** 0% 完全透明 100& 图像无变化 **/
  • 褐色(sepia)

将图像转换为深褐色

filter: sepia(70%);
/** 0% 图像无变化 100% 完全是深褐色 未设置时,值默认为0 **/
  • 饱和度(saturate)

转换图像的饱和度

filter: saturate
/** 0% 完全不饱和 100% 图像无变化 >100% 饱和度变高之后,色彩就会变重 **/
  • 对比度(contrast)

调整图像的对比度

filter: contract(50%)
/** 0% 图像变全黑 100% 图像不变 >100% 会运用更低的对比 **/
  • 模糊(blur)

给图像设置高斯模糊(近视眼)

filter: blur(8px);
/** 设定高斯模糊的值,屏幕上多少像素融合在一起,值越大越模糊 **/
  • 反色(invert)

反向输出图像

filter: invert(30%);
/** 0% 图像无变化 100% 完全反转 **/
  • 色相旋转(hue-rotate)

给图像应用色相旋转

filter: hue-rotate(80deg);
/** 设定图像被调整的色环角度值 0deg 图像无变化 角度没有最大值,但超过360deg就是绕了一圈 **/
  • 复合写法(简写)
filter: brightness(150%) drop-shadow(0px 0px 10px #999999);

以此类推,把图像变好看/难看都行。

今天的文章CSS中的filter(滤镜)分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/24122.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注