mask-image

1. CSS 中的 background-size

background-size 是一个 CSS 属性，用于控制背景图像的大小。它可以指定背景图像的宽度和高度，以适应元素的背景区域。

常见取值

• auto: 保持背景图像的原始尺寸（默认值）。
• cover: 调整背景图像的大小以完全覆盖元素的背景区域，可能会裁剪图像的一部分。
• contain: 调整背景图像的大小以完全适应元素的背景区域，不会裁剪图像，但可能会出现留白。
• <length> 和 <percentage>: 直接指定宽度和高度，可以用像素（如 100px）或百分比（如 50%）。

例子

.my-icon {
  background-image: url('icon.png');
  background-size: 100% 100%; /* 背景图像将拉伸或收缩到与元素完全匹配 */
  width: 100px;
  height: 100px;
}

2. 使用 CSS 蒙版 (mask-image) 实现图标着色

蒙版 (mask-image) 是一个 CSS 属性，用于指定元素的可见区域。通过将图标作为蒙版，可以控制背景颜色来实现图标的着色。这是一种替代直接着色背景图片的方法。

概念与实现

• 传统方法: 直接着色背景图像比较困难，尤其是使用 SVG 作为背景图像时，通常无法动态改变颜色。
• 蒙版方法: 使用 mask-image 属性，将图标作为蒙版，允许通过 background-color 控制图标颜色。

例子

.my-icon {
  background-color: red; /* 设置图标颜色 */
  mask-image: url('icon.svg'); /* 使用图标作为蒙版 */
  width: 100px;
  height: 100px;
}

3. CSS 中的 url() 函数

url() 函数用于指定外部资源的路径，这些资源可以是图像、字体、音频、视频等。它通常用于 CSS 属性如 background-image、border-image、list-style-image 等。

路径类型

• 相对路径: 相对于当前 CSS 文件或 HTML 文档的位置。
• 绝对路径: 从网站的根目录开始的完整路径。
• 完整 URL: 包含协议、域名和路径的完整网址。
• 数据 URL (Data URI): 直接将资源内容嵌入到 URL 中。

例子

/* 使用相对路径 */
background-image: url('../images/background.jpg');

/* 使用绝对路径 */
background-image: url('/assets/images/background.jpg');

/* 使用完整 URL */
background-image: url('https://example.com/images/background.jpg');

/* 使用数据 URL */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...');

4. 数据 URL (Data URI)

数据 URL 允许将资源内容直接嵌入到 HTML 或 CSS 文件中。它通常用于嵌入小型资源，减少 HTTP 请求。

语法与格式

url('data:[<mediatype>][;base64],<data>')

• <mediatype>: 指定资源的 MIME 类型，如 image/png、text/plain。默认为 text/plain;charset=US-ASCII。
• base64: 如果资源是二进制文件（如图像），通常使用 Base64 编码。文本文件（如 SVG）可以直接用 UTF-8 编码。
• <data>: 实际的资源内容，经过 Base64 编码或 URL 编码。

常见应用

• 嵌入图像

  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...');

• 嵌入 SVG

  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://...');

• 嵌入字体

  @font-face {
    font-family: 'MyFont';
    src: url('data:font/woff2;base64,d09GMgABAAAAAE...') format('woff2');
  }

优缺点

• 优点: 减少 HTTP 请求，便于打包与传输。
• 缺点: 增加文件体积，难以缓存，调试困难。

使用场景

• 小型图标和图像: 如导航栏的小图标。
• 字体文件: 小型字体文件可以嵌入。
• SVG 图像: 由于 SVG 是文本格式，嵌入数据 URL 便于使用。

总结

• background-size: 100% 100% 用于使背景图像完全覆盖元素的背景区域。
• 通过 mask-image 可以使用蒙版技术为 SVG 图标着色，而无需直接修改背景图片。
• CSS 的 url() 函数是引用外部资源的主要方式，支持多种路径格式，包括相对路径、绝对路径、完整 URL 和数据 URL。
• 数据 URL (Data URI) 是一种强大的工具，可以将资源直接嵌入到 CSS 或 HTML 中，但需要注意其性能和文件大小的权衡。