CSS滤镜的神奇用途：网站变灰、元素高亮、高亮、磨砂玻璃效果

<div class="glass glass-by-filter"></div>
<div class="glass glass-by-backdrop-filter"></div>

磨砂玻璃元素的通用样式、尺寸设置、圆角等基本样式：

.glass {
  height: 300px;
  width: 300px;
  border: 1px groove #EFEFEF;
  border-radius: 12px;
  background: rgba(242, 242, 242, 0.5);
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

滤镜：blur法，会在设置中添加一个伪元素::beforeblur方法并放置在底层，以达到毛玻璃效果。

.glass-by-filter {
  z-index: 1;
  box-sizing: border-box;
  position: relative;
}
.glass-by-filter::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: inherit;
  filter: blur(10px);
}

背景滤镜：blur 将blur直接添加到元素上，以实现毛玻璃效果。

.glass-by-backdrop-filter {
  backdrop-filter: blur(10px);
}

的效果如下图所示（左：filter，右：backgroundfilter）： ：玻璃边框扩展：https: /css-tricks .com/blur重新…

艺术照！即使是简单版的insatagram

复古，版画、油画、漫画、液化、老照片、性冷淡、莫兰迪、赛博朋克、旺达幻视风格都可以实现！

通过组合滤镜的所有方法，您可以创建任何您想要的效果。下面是一个简单的方法设置器filter，可以调整每种方法的值，并实时显示图像滤镜效果。如下所示。

页面主要代码如下。控制区域#imageEditor是表单表单。表单的每一行控制过滤方法的值。显示区域#imageContainer内部包含一个元素img，该元素受生成的滤镜filter

<form id="imageEditor">
  <p>
    <label for="gs">Grayscale</label>
    <input id="gs" name="gs" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="blur">Blur</label>
    <input id="blur" name="blur" type="range" min="0" max="10" value="0">
  </p>
  <p>
    <label for="br">Exposure</label>
    <input id="br" name="br" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="ct">Contrast</label>
    <input id="ct" name="ct" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="huer">Hue Rotate</label>
    <input id="huer" name="huer" type="range" min="0" max="360" value="0">
  </p>
  <p>
    <label for="opacity">Opacity</label>
    <input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
  </p>
  <p>
    <label for="invert">Invert</label>
    <input id="invert" name="invert" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="saturate">Saturate</label>
    <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
  </p>
  <p>
    <label for="sepia">Sepia</label>
    <input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
  </p>
  <input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
<div id="imageContainer" class="center">
  <img >
</div>

function editImage() {
  var gs = $("#gs").val();                // grayscale
  var blur = $("#blur").val();            // blur
  var br = $("#br").val();                // brightness
  var ct = $("#ct").val();                // contrast
  var huer = $("#huer").val();            // hue-rotate
  var opacity = $("#opacity").val();      // opacity
  var invert = $("#invert").val();        // invert
  var saturate = $("#saturate").val();    // saturate
  var sepia = $("#sepia").val();          // sepia
  $("#imageContainer img").css(
    "filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
  $("#imageContainer img").css(
    "-webkit-filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
}
// 当input值发生变化时即时应用滤镜
$("input[type=range]").change(editImage).mousemove(editImage);

影响，现在我们只实现实时过滤器预览。未来将实现的功能包括支持复杂的svg滤镜模板、导出和下载等。完成这些步骤后，您将不再需要下载额外的滤镜来为照片中的照片添加滤镜。未来。 APP？。完整版示例代码：https://codepen.io/dragonir/p... 点击预览

节省空间，加快网站加载速度

实践证明，同一图像会降低亮度、对比度和饱和度。与原图相比，缩小后的体积可以减少很大一部分体积空间2M。缩小并保存图像后，可压缩至约1M。在网页上，我们可以使用被弱化的图片，然后通过CSS过滤器恢复它们。这样就可以达到压缩资源量、提高网站加载速度、改善用户体验的目的。

具体操作请阅读以下说明：

对比度交换技术：使用 CSS 滤镜 提高图像性能 https://css-tricks.com/contra... ⓙ 兼容性

从查询caniuse的结果可以看出，属性css过滤器在现代浏览器中已经得到很好的支持，除了IE♾之外。可以在大多数其他浏览器中正常使用，并且如果需要可以在浏览器中添加核心前缀。不过，官网上也针对该问题给出了以下三个提示。相信后续的浏览器升级会逐渐修复这些问题：

• 在 Safari 中，如果子元素有动画效果，则不会应用滤镜。
• 目前，没有浏览器支持 spread-radius 过滤器的 drop-shadow 方法。
• 在 Edge 浏览器中，如果元素或子元素设置为 负 z 索引，则无法使用过滤器。

总结

本文简单列出了一些常用的使用 CSS 滤镜 的页面效果。事实上，每个内置方法filter都有无限的可能性。高级应用如invert反色效果悬停以及调整网站的棕色值❀epi护眼等。如果你发挥想象力和创造力，filter可以很好地应用到实践中。

以下示例是很好的应用。如果有兴趣，可以扩展阅读和学习：

• 冰冻玻璃效果 https://codepen.io/KazuyoshiG... 点击预览
• 破碎玻璃效果 https://codepen.io /bajjy/pen/...点击预览
• 使用滤镜实现的转场效果 https://codepen.io/nxworld/de...
• 反转按钮 https://codepen.io/monkey - com...点击预览
• 老照片https://codepen.io/dudleystor...点击预览
• 高级滤镜编辑器：https://codepen.io/stou / p...点击预览

最后附上复古莫兰迪冷油画效果滤镜，是使用图中上面的滤镜编辑器编辑的。 （哇，太哇了，CSS爵爵子yyds？））文章地址：https://segmentfault1.com/a