| 类名 | 样式 |
|---|---|
| .link-10 | color: color-mix(in oklch, var(--bs-link-color) 10%, transparent); |
| .link-20 | color: color-mix(in oklch, var(--bs-link-color) 20%, transparent); |
| .link-30 | color: color-mix(in oklch, var(--bs-link-color) 30%, transparent); |
| .link-40 | color: color-mix(in oklch, var(--bs-link-color) 40%, transparent); |
| .link-50 | color: color-mix(in oklch, var(--bs-link-color) 50%, transparent); |
| .link-60 | color: color-mix(in oklch, var(--bs-link-color) 60%, transparent); |
| .link-70 | color: color-mix(in oklch, var(--bs-link-color) 70%, transparent); |
| .link-80 | color: color-mix(in oklch, var(--bs-link-color) 80%, transparent); |
| .link-90 | color: color-mix(in oklch, var(--bs-link-color) 90%, transparent); |
| .link-100 | color: var(--bs-link-color); |
链接不透明度
使用工具更改链接rgba()颜色值的 alpha 不透明度。请注意，更改颜色的不透明度可能导致链接具有不足的对比度。
<p><a class="link-10" href="#">Link opacity 10</a></p>
<p><a class="link-20" href="#">Link opacity 20</a></p>
<p><a class="link-30" href="#">Link opacity 30</a></p>
<p><a class="link-40" href="#">Link opacity 40</a></p>
<p><a class="link-50" href="#">Link opacity 50</a></p>
<p><a class="link-60" href="#">Link opacity 60</a></p>
<p><a class="link-70" href="#">Link opacity 70</a></p>
<p><a class="link-80" href="#">Link opacity 80</a></p>
<p><a class="link-90" href="#">Link opacity 90</a></p>
<p><a class="link-100" href="#">Link opacity 100</a></p>你甚至可以在悬停时更改不透明度级别。
<p><a class="hover:link-10" href="#">Link hover opacity 10</a></p>
<p><a class="hover:link-20" href="#">Link hover opacity 20</a></p>
<p><a class="hover:link-30" href="#">Link hover opacity 30</a></p>
<p><a class="hover:link-40" href="#">Link hover opacity 40</a></p>
<p><a class="hover:link-50" href="#">Link hover opacity 50</a></p>
<p><a class="hover:link-60" href="#">Link hover opacity 60</a></p>
<p><a class="hover:link-70" href="#">Link hover opacity 70</a></p>
<p><a class="hover:link-80" href="#">Link hover opacity 80</a></p>
<p><a class="hover:link-90" href="#">Link hover opacity 90</a></p>
<p><a class="hover:link-100" href="#">Link hover opacity 100</a></p>彩色链接
链接可以使用主题颜色工具类来着色。
<p><a href="#" class="theme-primary underline-offset-2 underline-20 hover:underline-100">Primary link</a></p>
<p><a href="#" class="theme-accent underline-offset-2 underline-20 hover:underline-100">Accent link</a></p>
<p><a href="#" class="theme-success underline-offset-2 underline-20 hover:underline-100">Success link</a></p>
<p><a href="#" class="theme-danger underline-offset-2 underline-20 hover:underline-100">Danger link</a></p>
<p><a href="#" class="theme-warning underline-offset-2 underline-20 hover:underline-100">Warning link</a></p>
<p><a href="#" class="theme-info underline-offset-2 underline-20 hover:underline-100">Info link</a></p>
<p><a href="#" class="theme-inverse underline-offset-2 underline-20 hover:underline-100">Inverse link</a></p>
<p><a href="#" class="theme-secondary underline-offset-2 underline-20 hover:underline-100">Secondary link</a></p>可访问性提示：使用颜色传达含义
仅使用颜色来增加意义只提供视觉提示，这不会传达给使用辅助技术（如屏幕阅读器）的用户。请确保意义从内容本身即可明显体现（例如，可见的文本以及 足够的 颜色对比) 或通过替代方式包含，例如通过隐藏的附加文本 .visually-hidden 类
CSS
除了以下 Sass 功能之外，还可以考虑阅读我们包含的 CSS 自定义属性（也称为 CSS 变量），用于颜色和其他内容。
Sass 工具 API
链接工具在我们的工具类 API 中的 scss/_utilities.scss 中声明。了解如何使用工具类 API。
"link-opacity": (
property: color,
// css-var: true,
class: link,
state: hover,
values: theme-opacity-values(--link-color)
),