滤镜-30天学会HTML＋CSS，制作精美网站

前一章节介绍过混合模式，相信对滤镜也不会很陌生。「滤镜」是什麽呢？他可以做出与Photoshop相同的滤镜，CSS提供了十种滤镜，可以用在图片、文字...等地方，还能够搭配滑鼠移入做出不一样的效果

滤镜相关属性：

backdrop-filter：只对背景有作用
filter:可用在图片、文字...

支援浏览器，想看浏览器支援可以到 can i use 网站

grayscale灰阶

以%为单位，初始值0%，最大值100%

sepia怀旧

以%为单位，初始值0%，最大值100%

saturate饱和

以%为单位，初始值100%，大於100%越鲜艳，小於100%彩度变低

hue-rotate色相旋转

以deg为单位，初始值0deg，最大值360deg

invert负片

以%为单位，初始值0%，最大值100%

opacity不透明

以%为单位，初始值100%，最小值0% ，值越小越透明

0%虽然看不见，但是他会存在在画面上

brightness亮度

以%为单位，初始值100%，大於100%越亮，小於100%越暗

contrast对比

以%为单位，初始值100%，大於100%对比越大，小於100%对比越小

blur模糊

以px为单位，初始值0px，没有最大值，数字越大越模糊

drop-shadow下拉阴影

与box-shadow设定值相同，但呈现方式不同

drop-shadow会按照目标原始的内容去产生阴影，box-shadow会按照区块

比较常遇到的是icon *.png图片需要做阴影，下图是box-shadow及drop-shadow设定所呈现的样式差异

应用

使用滤镜样式做滑鼠移入效果

再也不需要两张图了～～只需要准备一张彩色的图片，使用滤镜控制滑入前後的样子，范例是使用灰阶滤镜

<img src="img.jpg" width="200" >
<img src="img.jpg" width="200" >
<img src="img.jpg" width="200" >

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter:  grayscale(100%);
}
img:hover {
    -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    filter:  grayscale(0%);
}

毛玻璃效果

<div class="filter-box">
    <div class="txt">
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
</div>

使用filter做毛玻璃

在filter-box区块设定一个::after伪元素，里面放置背景图相关设定及模糊滤镜样式

.filter-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  height: 50vh;
  
}
.filter-box::after{
  content: "";
  background-position: center center;
  background-size: cover;
  position: absolute;
  /* 图片需超过外层的区块 */
  top: -30px;
  bottom: -30px;
  left: -30px;
  right: -30px;
  background-image: url("img.jpg");
  filter: blur(8px);
  z-index: -1;
}
.txt{
  background-color: rgba(0,0,0,.3);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 30px;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

使用backdrop-filter设定

在filter-box设置背景图相关设定及模糊滤镜样式，然後在文字区块设定backdrop-filter，就完成了

.filter-box {
  position: relative;
  overflow: hidden;
  /* 加入 z-index，区块内的文字才能正确显示 */
  z-index: 1;
  width: 100%;
  height: 50vh;
  background-image: url("https://cdn.pixabay.com/photo/2021/01/19/18/45/field-5932123_1280.jpg");
  background-position: center center;
  background-size: cover;
  
}
.txt{
  background-color: rgba(0,0,0,.3);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 30px;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

两种方式都可以达到同样效果，就CSS写法不同而已