阅读数:128 评论数:0

一、概述

CSS 的 mask 属性及其相关属性允许你使用图像、渐变或 SVG 图像来遮罩元素的部分内容。

二、mask 属性

mask 属性是一个简写属性，用于同时设置多个遮罩相关的属性。它可以接受多个值，包括图像 URL、渐变、SVG 图像等。

.element {
  mask: url('mask-image.png') no-repeat center / contain;
  -webkit-mask: url('mask-image.png') no-repeat center / contain; /* 兼容 WebKit 内核的浏览器 */
}

1、mask-image

指定用于遮罩的图像，可以是 URL、渐变或 SVG 图像。

.element {
  mask-image: url('mask-image.png');
  -webkit-mask-image: url('mask-image.png'); /* 兼容 WebKit 内核的浏览器 */
}

2、mask-mode

指定遮罩的混合模式，可以是 alpha 或 luminance。alpha 使用图像的 alpha 通道，luminance 使用图像的亮度。

.element {
  mask-mode: alpha;
  -webkit-mask-mode: alpha; /* 兼容 WebKit 内核的浏览器 */
}

3、mask-repeat

指定遮罩图像的重复方式，类似于 background-repeat 属性。可选值包括 repeat、repeat-x、repeat-y、no-repeat、space 和 round。

.element {
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat; /* 兼容 WebKit 内核的浏览器 */
}

4、mask-position

指定遮罩图像的位置，类似于 background-position 属性。

.element {
  mask-position: center;
  -webkit-mask-position: center; /* 兼容 WebKit 内核的浏览器 */
}

5、mask-size

指定遮罩图像的大小，类似于 background-size 属性。可选值包括 auto、cover、contain 或具体的尺寸（如 100px 50px）。

.element {
  mask-size: contain;
  -webkit-mask-size: contain; /* 兼容 WebKit 内核的浏览器 */
}

6、mask-clip

指定遮罩图像的裁剪区域。可选值包括 border-box、padding-box、content-box 和 text。

.element {
  mask-clip: border-box;
  -webkit-mask-clip: border-box; /* 兼容 WebKit 内核的浏览器 */
}

7、mask-origin

指定遮罩图像的定位区域。可选值包括 border-box、padding-box 和 content-box。

.element {
  mask-origin: border-box;
  -webkit-mask-origin: border-box; /* 兼容 WebKit 内核的浏览器 */
}

8、mask-composite

指定遮罩图像的组合模式。可选值包括 add、subtract、intersect 和 exclude。

.element {
  mask-composite: add;
  -webkit-mask-composite: add; /* 兼容 WebKit 内核的浏览器 */
}

三、使用mask改变图标颜色

1、对svg使用遮罩

在 SVG 中，<mask> 元素用于定义一个遮罩（mask），可以应用到其他图形元素上，控制它们的透明度和可见性。遮罩是通过指定一个遮罩区域以及遮罩区域内的透明度来工作的。遮罩区域内的白色部分表示完全不透明，黑色部分表示完全透明，灰色部分表示部分透明。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义遮罩 -->
  <defs>
    <mask id="myMask">
      <!-- 遮罩内容 -->
      <rect x="0" y="0" width="200" height="200" fill="white" />
      <circle cx="100" cy="100" r="50" fill="black" />
    </mask>
  </defs>

  <!-- 应用遮罩 -->
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#myMask)" />
</svg>

在这个示例中：

• 我们在 <defs> 元素中定义了一个遮罩 <mask id="myMask">。
• 遮罩内容包括一个填充为白色的矩形和一个填充为黑色的圆形。白色部分表示完全不透明，黑色部分表示完全透明。
• 然后，我们在一个红色的矩形上应用了这个遮罩，使用 mask="url(#myMask)"。

如何在 Vue.js 组件中使用 SVG 遮罩来改变图标的颜色：

<template>
  <div class="icon-container" :style="{ '--icon-color': color }">
    <svg viewBox="0 0 24 24" class="icon">
      <defs>
        <mask id="icon-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
          <path
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
            fill="white"
          />
        </mask>
      </defs>
      <rect width="24" height="24" fill="var(--icon-color)" mask="url(#icon-mask)" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'MaskedIcon',
  props: {
    color: {
      type: String,
      default: '#000000',
    },
  },
};
</script>

<style scoped>
.icon-container {
  width: 24px;
  height: 24px;
}
.icon {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <div id="app">
    <MaskedIcon color="#ff0000" />
    <MaskedIcon color="#00ff00" />
    <MaskedIcon color="#0000ff" />
  </div>
</template>

<script>
import MaskedIcon from './components/MaskedIcon.vue';

export default {
  name: 'App',
  components: {
    MaskedIcon,
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

2、使用遮罩改变png图标颜色

<template>
  <div class="icon-container" :style="{ '--icon-color': color }">
    <div class="icon" :style="{ '--icon-url': `url(${iconUrl})` }"></div>
  </div>
</template>

<script>
export default {
  name: 'MaskedIcon',
  props: {
    color: {
      type: String,
      default: '#000000',
    },
    iconUrl: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
.icon-container {
  width: 100px;
  height: 100px;
  position: relative;
}
.icon {
  width: 100%;
  height: 100%;
  background: var(--icon-color);
  mask-image: var(--icon-url);
  mask-size: cover;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
}
</style>

<template>
  <div id="app">
    <MaskedIcon color="#ff0000" iconUrl="path/to/your/icon.png" />
    <MaskedIcon color="#00ff00" iconUrl="path/to/your/icon.png" />
    <MaskedIcon color="#0000ff" iconUrl="path/to/your/icon.png" />
  </div>
</template>

<script>
import MaskedIcon from './components/MaskedIcon.vue';

export default {
  name: 'App',
  components: {
    MaskedIcon,
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>