@designbycode/tailwindcss-mask-image

尾风 CSS 图像遮罩插件

Tailwind CSS图像遮罩插件是一个自定义插件,可以将Tailwind CSS与使用CSS梯度应用图像遮罩的公用设备相扩展. 通过这个插件,可以轻松地创建出不同方向和梯度风格的图像口罩.

目录

• 安装
  • 使用 pnpm
  • 使用 npm
  • 使用线条
• 使用量
• 公用事业
• 应用图像遮盖
• 默认值
• 改变渐变起止点
  • 可用 --mask-image-start和 --mask-image-end的百分比值 :
• 配置
• 示例
• 捐款
• 许可证
• 作者
• 承认

安装

要使用此插件, 您需要通过 pnpm, npm 或纱线安装 .

使用 pnpm

pnpm add @designbycode/tailwindcss-mask-image

使用 npm

npm install @designbycode/tailwindcss-mask-image

使用线条

yarn add @designbycode/tailwindcss-mask-image

使用量

插件安装后,可以在您的 Tailwind CSS 配置文件中启用. 通常,这个文件被命名为尾风. config.js.

module.exports = {
    // ...other configurations
    plugins: [
        // ...other plugins
        require("@designbycode/tailwindcss-mask-image"),
    ],
};

公用事业

该插件为应用CSS梯度的图像口罩而生成了多个功能类. 您可以使用这些工具类来方便地将口罩应用到您的 HTML 中的任何元素中 .

应用图像遮盖

为了工作,你只需要增加一个班 .mask-image-{value} 给您 html。 课外休息只是修饰.

<div class="mask-image-r"></div>

您可以使用下列工具类应用图像口罩:

默认值

插件在:root元素中设置了一些默认的 CSS 变量,它定义了图像遮罩的颜色和方向的默认值.

改变渐变起止点

您可以使用下列工具类来动态改变梯度的起始和结尾点:

• .mask-image-start-0 改为 .mask-image-start-100: 将 --mask-image-start 变量修改为指定的百分比值.

• .mask-image-end-0 to .mask-image-end-100: 将 --mask-image-end变量修改为指定的百分比值.

<div class="mask-image-b mask-image-start-25 mask-image-end-75"></div>
<!-- or by arbitrary value -->
<div class="mask-image-[73%] mask-image-start-[33%] mask-image-end-[66%]"></div>

可用 --mask-image-start和 --mask-image-end的百分比值 :

配置

该插件允许您通过修改您 Tailwind CSS 配置文件中的主题对象来自定义梯度步骤和方向 .

// tailwind.config.js

module.exports = {
    // ...other configurations
    plugins: [
        // ...other plugins
        require("@designbycode/tailwindcss-mask-image"),
    ],
    theme: {
        imageMaskSteps: {
            // Add your custom gradient steps here
            0: "0%",
            10: "10%",
            25: "25%",
            // ...
        },
        imageMaskDirections: {
            // Add your custom mask directions here
            t: "to top",
            b: "to bottom",
            // ...
        },
    },
};

示例

以下是您如何使用工具类应用图像口罩的例子:

<div class="mask-image-t mask-image-start-30 mask-image-end-70">
    <!-- Your content here -->
</div>

说明 新建为v2. 开始和结束颜色不透明

开始和结束不透明颜色

可以设置起始和结尾颜色的不透明,以对口罩进行更多的控制.

<div class="mask-image-t mask-image-start-opacity-50 mask-image-end-opacity-70">
    <!-- Your content here -->
</div>

任意值从0到100不等,以更能控制口罩.

<div class="mask-image-t mask-image-start-opacity-[55] mask-image-end-opacity-[20]">
    <!-- Your content here -->
</div>

捐款

欢迎为此插件贡献 ! 如果遇到任何问题,有特性请求,或想要改进插件,可以随意创建拉出请求,或在GitHub寄存器上提交问题.

许可证

本项目根据以下规定获得许可证: 麻省理工学院 驾照 - 看 自由主义 详细文件.

作者

克劳德·米堡

• 吉图布: @ dedesignbycode( 代号)
• 无 : @ dedesignbycode (英语)

承认

• 这个插件的灵感来自使用Tailwind CSS的网页开发者的需求.
• 特别感谢Tailwind CSS团队创造了这样一个惊人的框架.