跳至主要內容

10.滤镜、混合、裁剪和蒙版

12a2024/10/3大约 10 分钟HTML5前端

10.滤镜、混合、裁剪和蒙版

10.1 滤镜

  • CSS提供了一种通过filter属性将内置的视觉过滤器效果以及在页面或外部文件中定义的自定义过滤器应用到元素的方法，滤镜通常用于调整图像、背景和边框的渲染

    • 可选的取值包括

      • 大量滤镜函数，语法和用途见MDN文档
      • 通过url加载通过svg存储的某个滤镜元素
      filter: blue(10px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* svg文件中的一个元素 */
filter: url(file.svg#filter-element-id);
/* 包含一个滤镜的svg图像 */
filter: url(file.svg);

/* 多个滤镜的叠加，将依次应用每个滤镜 */
filter: contrast(175%) brightness(103%) url(file.svg#filter-id);
      函数效果展示

      展示1展示2展示3展示4

10.2 混合

  • CSS中的mix-blend-mode可以定义因为定位等原因重叠在一起的元素的合成方式，也可以定义元素与祖先元素背景的合成方式，传入一个混合模式参数

  • 混合模式可以简单地归为以下几类

    • normal：最终颜色是顶层颜色，默认值
    • 变暗、变亮、差值和排除
      • darken：最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色
      • lighten：最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色
      • difference：最终颜色是两种颜色中较浅的颜色减去两种颜色中较深的颜色得到的结果
      • exclusion：最终颜色是两种颜色中较浅的颜色减去两种颜色中较深的颜色得到的结果最终颜色类似于difference，但对比度更低一些
    • 正片叠底、滤色和叠加
      • multiply：最终颜色为顶层颜色与底层颜色相乘的结果
      • screen：最终的颜色是反转颜色(顶层颜色和底层颜色)，相乘它们并反转该值的结果
      • overlay：如果底层颜色比顶层颜色深，则最终颜色是multiply的结果，如果底层颜色比顶层颜色浅，则最终颜色是screen的结果
    • 颜色减淡和加深
      • color-dodge：最终颜色是将底层颜色除以顶层颜色的反色的结果
      • color-burn：最终颜色是反转底层颜色，将反转后的值除以顶层颜色，再反转除以后的值得到的结果
    • 强光和柔光
      • hard-light：如果顶层颜色比底层颜色深，则最终颜色是multiply的结果；如果顶层颜色比底层颜色浅，则最终颜色是screen的结果。此混合模式相当于顶层与底层互换后的overlay
      • soft-light：最终颜色类似于hard-light的结果，但更加柔和一些
    • 色相、饱和度、颜色和明度
      • hue：最终颜色由顶层颜色的色调和底层颜色的饱和度与亮度组成
      • saturation：最终颜色由顶层颜色的饱和度和底层颜色的色调与亮度组成
      • color：最终颜色由顶层颜色的色调与饱和度和底层颜色的亮度组成
      • luminosity：最终颜色由顶层颜色的亮度和底层颜色的色调和饱和度组成

    详情见MDN文档

    前景(source)和背景(destination)叠加效果预览

    预览1预览2预览3预览4预览5

  • 多背景混合：对于一个元素如何和背景混合是一回事，一个元素的多个背景如何混合在一起又是另一回事，CSS属性background-blend-mode可以定义该元素的背景图片，以及背景色如何混合，属性接收一个,分割的混合模式列表，对应每张图片的混合模式，如果混合模式过少会重复列表直到和图片列表长度相同，过多会截断列表
  • 独立混合：默认情况下混合会受有相同层叠上下文的祖先元素的影响，也就是会和父元素背景混合，如果希望独立出来，可以让元素和子元素拥有单独的层叠上下文，比如isolation：isolate;，这样混合效果就不受父元素的影响

10.3 裁剪

  • clip-path属性使用裁剪方式创建元素的可显示区域，只显示区域内的部分，支持形状值，可以结合动画实现变化效果
    • 输入值可以额外包含一个参考区域关键字，也就是用来表明是对哪个区域裁剪的形状盒关键字，默认是border-box
      • margin-box：定义一个由外边距的外边缘封闭形成的形状
      • border-box：定义一个由边界的外边缘封闭形成的形状
      • padding-box：定义一个由内边距的外边缘封闭形成的形状
      • content-box：定义一个由内容区域的外边缘封闭形成的形状
      • fill-box：使用SVG对象边界框(object bounding box)作为引用框
      • stroke-box：使用SVG笔触边界框(stroke bounding box)作为引用框
      • view-box：使用最近的SVG视口(viewport)作为引用框
    • 当值不为none时会创建层叠上下文
    • 不会改变元素的原本大小，如果有和行内或其他浮动元素一起展示的需求，需要配合浮动和shape-outside使用，见浮动与形状部分的示例
    • 在形状函数polygon中可以使用填充规则关键字，对于svg格式中当且仅当需要使用的元素是clip-path标签的子元素时，也可以通过clip-ruler属性设置填充规则，nonzero默认，填充所有被包围的空间；evenodd，填充被包围奇数次的空间

10.4 蒙版

  • 蒙版的意思是，位于形状内部的内容可见，位于形状外部的内容不可见，听起来好像和裁剪很像，但蒙版只能使用图片值定义可见区域，并且有更多的调整属性

    蒙版属性在2023年12月才被chrome内核完全支持，目前仍有部分浏览器还不能直接使用，需要添加-webkit-前缀

  • 定义一个蒙版：这一步可以通过输入一个图片值或一个SVG遮罩元素完成

    • mask-image属性接收一个任何形式的图片，如果图片有效，就将这张图片作为蒙版
    • 只有蒙版图片不透明的地方才能看到内容
    • 如果希望不止定义一个蒙版，可以输入以,隔开的图片值列表
    蒙版例子
    蒙版例子

  • 改变蒙版模式：大部分情况下，是把图片的alpha通道应用到另一个元素上，但还有另一种方式，使用图片的各部分亮度应用蒙版

    • alpha：此关键字指示应使用掩码层图像的透明度值作为掩码值
    • luminance：此关键字指示掩膜层图像的亮度值应用作掩码值
    • match-source：默认值，如果源图像是图片类型使用alpha，如果源图像是SVG遮罩元素<mask>，使用luminance

    设置默认的遮罩元素蒙版模式

    还有一个设置蒙版类型mask-type，会影响match-source的效果，默认值是luminance，但如果设置为alpha，会把遮罩元素<mask>的默认蒙版模式修改为alpha

  • 改变蒙版的尺寸、重复方式和定位：默认的情况要求蒙版的尺寸和要遮罩的尺寸一致，其实可以不一致，调整的方式有好几种，和背景图的尺寸调整方式和行为相同，具体的值和背景部分值完全相同

    • mask-size属性，用于调整蒙版尺寸，可以接收两个长度值表示蒙版的尺寸或contain、cover关键字之一
      • 单个值，这个值指定图片的宽度，图片的高度隐式的为auto(保持对应的比例)
      • 两个值，第一个值指定图片的宽度，第二个值指定图片的高度，支持长度值或auto
      • contain关键字，尽可能放大图像并保持图像的纵横比，图像如果没有设置位置将自动居中
      • cover关键字，缩放图像尽可能大，并保持图像的纵横比，当图像和容器具有不同的尺寸时，图像将被剪裁
    • mask-repeat属性，用于定义图片的重复方式，取值和background-repeat完全相同，可以分别设置在x和y轴重复
    • mask-position属性，用于定义图片的位置，取值和行为与background-position相同，一般是提供两个长度参数作为图片的位置坐标，支持使用各种位置值
    • mask-origin属性，定义图片参考框的位置，和background-origin相同
      • border-box：蒙版图片的摆放以border区域为参考
      • padding-box：蒙版图片的摆放以padding区域为参考
      • content-box：蒙版图片的摆放以content区域为参考

  • 裁剪和合成蒙版

    • mask-clip属性，定义蒙版的裁剪方式，默认情况下，蒙版在应用的元素边框border内有效，这对应了background-clip，但可选值更多

      • content-box：绘制的内容将被剪切到内容框中，也可以使用content关键字
      • padding-box：绘制的内容将被剪切到内边框，也可以使用padding关键字
      • border-box：绘制的内容将被剪切到边框，也可以使用border关键字
      • fill-box：绘制的内容将被剪裁到(object bounding box)
      • stroke-box：绘制的内容将被剪裁到笔触边界框(stroke bounding box)
      • view-box：绘制的内容将被裁剪到SVG视口(viewport)
      • no-clip：绘制的内容不会被剪裁
      • text：将遮罩图像剪辑到元素的文本

      border、content、padding在一些浏览器上支持性还不佳，尽量不要使用

    • mask-composite属性，能够从根本上改变多个蒙版的合成方式，可以对每个蒙版分别设置与底层模板叠加时的合成方式，用,隔开，每个蒙版支持

      • add正常叠加在上方(默认值)
      • subtract和底层模板相交区域被删除，相交的底层模板不展示
      • intersect只保留模板相交的部分
      • exclude排除模板相交的部分

      图片列表中最开头的图片绘制在最上方

      合成示例
      合成示例

  • mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size、mask-composite属性可以写在一起，作为mask属性

    • 和background属性一样，要求对每个遮罩单独设置这些值
    #example {
    mask-image: url(circle.svg), url(square.png), url(triangle.gif);
    mask-repeat: repeat-y, no-repeat;
    mask-position: top right, center, 25% 67%;
    mask-composite: subtract, add;
    mask-size: auto, 50% 33%, contain;
}

/* 可以写成 */
#example {
    mask: url(circle.svg) repeat-y top right / auto subtract,
          url(square.png) no-repeat center / 50% 33% add,
          url(triangle.gif) repeat-y 25% 67% / contain;
}
  • 遮罩边框图像：用于对边框进行遮罩，和图像边框差不多
    • mask-border-source作为蒙版的源图像
    • mask-border-slice将源图像切割后的区域的尺寸
    • mask-border-width边框蒙版的宽度
    • mask-border-outset边框蒙版距离元素外边界的距离
    • mask-border-repeat定义如何调整源图像的边缘区域以适应边框蒙版的尺寸
    • mask-border-mode定义将源图片的蒙版模式设置为亮度luminance还是透明度alpha

    目前这些属性都在测试中，大多数浏览器都需要添加-webkit-mask-box-image前缀或完全不支持

最近更新