Tailwind CSS - 强制颜色调整

Tailwind CSS 强制颜色调整是一个实用程序类，用于选择加入和退出强制颜色。有两个类，因此分配的内容将是。

Tailwind CSS 强制颜色调整类

以下是提供了一种有效处理元素可访问性的 **Tailwind CSS 强制颜色调整** 类的列表。

类	CSS 属性
forced-color-adjust-auto	forced-color-adjust: auto;
forced-color-adjust-none	forced-color-adjust: none;

Tailwind CSS 强制颜色调整类的功能

**forced-color-adjust-auto:** 此类用于选择一个元素以撤消 forced-color-adjust-none 类的效果。
**forced-color-adjust-none:** 此类用于选择一个元素退出强制颜色模式强制执行的颜色。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 强制颜色调整类示例

以下示例将说明 Tailwind CSS 颜色调整类实用程序。

**注意：**尝试在您的开发者工具中模拟 `forced-colors: active` 以查看更改。

退出强制颜色

在此示例中，我们已使用 **`forced-color-adjust-none`** 选择退出强制颜色模式强制执行的颜色。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Forced Color Adjust Class
    </h2>
    <div class="flex">
        <p class="forced-color-adjust-none 
                  border-black bg-green-500">
            No forced color adjust here
        </p>
        
    </div>

</html>

恢复强制颜色

这里我们使用了 **`forced-color-adjust-auto`** 来撤消 **`forced-color-adjust-none`**，使元素遵守强制颜色模式强制执行的颜色

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Forced Color Adjust Class
    </h2>
    <div class="flex">
        <p class="forced-color-adjust-none 
                  lg:forced-color-adjust-auto 
                  border-black bg-green-500">
            No forced color adjust here, until you 
            hit a large viewport size, and then
            re-implement.
        </p>
        
    </div>

</html>

打印页面