【CSS】filter滤镜1

Composition
488 阅读3分钟

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

filter

介绍

  • 使用CSS的filter属性，可以给样式添加滤镜，从而实现许多效果
  • 接下来，我们来看看利用这个属性可以实现的一些常用的效果

（1）模糊效果blur

  • 设置filter: blur()可以为元素添加高斯模糊效果

    • 属性值越大，则模糊效果越大

    • 属性值可以是有效的CSS长度值（如：px、em、rem等），但不接受百分比值

    需要注意的是，这个属性会将目标容器上的所有元素都添加模糊效果，包括背景、文字等，也都会被模糊

  • 下图为添加模糊效果前后对比：

    .box1 {
    background-color: rgba(255, 255, 255, 0.5);
}
.box2 {
    background-color: rgba(255, 255, 255, 0.5);
    filter: blur(4px);
}

    image-20211101211448910

（2）透明效果opacity

  • 用于设置容器的透明程度，其作用效果同opacity属性的效果一致

    • 最大值为1，表示不透明；最小值为0表示完全透明
    • 也可以使用百分比值

  • 对比

    .box3 {
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
}
.box4 {
    background-color: rgb(255, 255, 255);
    filter: opacity(0.5);
}

    image-20211101211508864

（3）阴影效果drop-shadow

  • 为目标容器添加阴影效果，其作用效果同现有属性box-shadow的效果类似，属性值的设置也类似

  • 属性值按照以下顺序进行设置

    • x水平阴影偏移值

    • y垂直阴影偏移值

    • blur阴影模糊值

    • color阴影颜色值：默认黑色

    注：与box-shadow相比，filter: drop-shadow()是没有inset属性值和spread属性值的

    但在某些场景下，drop-shadow是比box-shadow更好用的，详见下面示例

  • 效果对比

    .box5 {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 5px 5px 5px #000;
}
.box6 {
    background-color: rgba(255, 255, 255, 0.5);
    filter: drop-shadow(5px 5px 5px #000);
}

    image-20211101211533340

    .box5 {
    border: 100px solid transparent;
    border-left-color: #fff;
    box-shadow: 10px 10px 5px #000;
}
.box6 {
    border: 100px solid transparent;
    border-left-color: #fff;
    filter: drop-shadow(10px 10px 5px #000);
}

    image-20211101205812213

    从图中可以明显看出两者的差别：

    • box-shadow（左）：是将容器看作一个整体，一个矩形区域，然后在这一整个元素上添加阴影
    • drop-shadow（右）：会反映出实际的情况
      • 即容器整个是透明的，则阴影会在透明区域下也展示出来
      • 容器是其它形状的，则会按照这个形状来添加阴影

（4）明亮程度brightness

  • 使用filter: brightness()来设置目标容器的明亮度

    • 属性值：最大值为1，为默认值，表示正常亮度；最小值为0，表示完全黑
    • 也可以使用百分比值

  • 对比示例

    .box7 {
    background-color: rgba(255, 255, 255, 0.5);
}
.box8 {
    background-color: rgba(255, 255, 255, 0.5);
    filter: brightness(0);
}

    image-20211101211554378

    需要注意的是，即使设置为全黑：brightness(0)，元素也会保持原来的透明度

    • 所以它的效果其实和background-color: rgba(0, 0, 0, 0.5)是一致的

（5）对比度contrast

  • 使用filter: contrast()来设置目标容器的明亮度

    • 属性值：最大值为1，为默认值，表示正常亮度；最小值为0，表示完全黑
    • 也可以使用百分比值

  • 对比示例

    .box9 {
    background-color: rgb(255, 255, 255);
    filter: contrast(0.5);
}
.box10 {
    background-color: rgb(255, 255, 255);
    filter: contrast(0);
}

    image-20211101212145039

avatar
文章
阅读
粉丝