Tailwind CSS - Sepia
Tailwind CSS Sepia 是一个实用类,用于将棕褐色滤镜应用于元素。
Tailwind CSS Sepia 类
以下是用于有效应用棕褐色滤镜的 Tailwind CSS Sepia 类列表。
| 类 | CSS 属性 |
|---|---|
| sepia-0 | filter: sepia(0); |
| sepia | filter: sepia(100%); |
Tailwind CSS Sepia 类的功能
- sepia-0:此类用于从元素中移除棕褐色滤镜。
- sepia:此类用于将棕褐色滤镜应用于元素。
Tailwind CSS Sepia 类示例
以下示例将说明 Tailwind CSS Sepia 类的不同可能性和实用性。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-3 font-bold">
Tailwind CSS Sepia Classes
</h2>
<div class="flex gap-6 flex-wrap">
<div>
<h3 class="text-lg font-medium">sepia-0</h3>
<img class="sepia-0 w-28 h-24 object-fit"
src=
"/javascript/images/javascript.jpg"
alt="Image">
</div>
<div>
<h3 class="text-lg font-medium">sepia</h3>
<img class="sepia w-28 h-24 object-fit"
src=
"/javascript/images/javascript.jpg"
alt="Image">
</div>
</div>
</body>
</html>

