笙亿网络策划

Tailwind CSS 怎么设置 backdrop-sepia 效果？

约 4 分钟读完 7 阅
文章导读
Previous Quiz Next Tailwind CSS Backdrop Sepia 是一个用于为元素应用 Backdrop Sepia 滤镜的 utility class。
📋 目录
  1. Ⅰ Tailwind CSS Backdrop Sepia 类
  2. Ⅱ Tailwind CSS Backdrop Sepia 类的功能
  3. Ⅲ Tailwind CSS Backdrop Sepia 类示例
A A

Tailwind CSS - Backdrop Sepia

Previous
Quiz
Next

Tailwind CSS Backdrop Sepia 是一个用于为元素应用 Backdrop Sepia 滤镜的 utility class。

Tailwind CSS Backdrop Sepia 类

以下是用于有效应用 Backdrop Sepia 滤镜的 Tailwind CSS Backdrop Sepia 类列表。

Class CSS Properties
backdrop-sepia-0 filter: backdrop-sepia(0);
backdrop-sepia filter: backdrop-sepia(100%);

Tailwind CSS Backdrop Sepia 类的功能

  • backdrop-sepia-0: 该类用于移除元素的 backdrop-sepia 滤镜。
  • backdrop-sepia: 该类用于为元素应用 backdrop-sepia 滤镜。

Tailwind CSS Backdrop Sepia 类示例

以下示例展示了 Tailwind CSS Backdrop Sepia 类不同的可见性和实用功能。

示例

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

<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Backdrop Sepia Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-sepia-0 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-100 font-bold py-12 text-center">
                Backdrop-Sepia-0
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-sepia absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-100 font-bold py-12 text-center">
                Backdrop-Sepia
            </div>
        </div>
    </div>
</body>

</html>