Tailwind CSS - Mix Blend Mode
Tailwind CSS Mix Blend Mode 是一个实用类，它提供了一种有效的方法来控制元素如何与背景混合。
Tailwind CSS Mix Blend Mode 类
以下是 Tailwind CSS Mix Blend Mode 类的列表，这些类提供了一种有效的方法来控制元素如何与背景混合。
| 类 | CSS 属性 |
|---|---|
| mix-blend-normal | mix-blend-mode: normal; |
| mix-blend-multiply | mix-blend-mode: multiply; |
| mix-blend-screen | mix-blend-mode: screen; |
| mix-blend-overlay | mix-blend-mode: overlay; |
| mix-blend-darken | mix-blend-mode: darken; |
| mix-blend-lighten | mix-blend-mode: lighten; |
| mix-blend-color-dodge | mix-blend-mode: color-dodge; |
| mix-blend-color-burn | mix-blend-mode: color-burn; |
| mix-blend-hard-light | mix-blend-mode: hard-light; |
| mix-blend-soft-light | mix-blend-mode: soft-light; |
| mix-blend-difference | mix-blend-mode: difference; |
| mix-blend-exclusion | mix-blend-mode: exclusion; |
| mix-blend-hue | mix-blend-mode: hue; |
| mix-blend-saturation | mix-blend-mode: saturation; |
| mix-blend-color | mix-blend-mode: color; |
| mix-blend-luminosity | mix-blend-mode: luminosity; |
| mix-blend-plus-darker | mix-blend-mode: plus-darker; |
| mix-blend-plus-lighter | mix-blend-mode: plus-lighter; |
Tailwind CSS Mix 混合模式类的功能
- mix-blend-normal:此类用于将混合模式设置为正常。
- mix-blend-multiply:此类用于将混合模式设置为正片叠底。
- mix-blend-screen:此类用于设置混合模式屏幕。
- mix-blend-overlay:此类用于设置混合模式叠加。
- mix-blend-darken:此类用于设置混合模式变暗。
- mix-blend-lighten:此类用于设置混合模式变亮。
- mix-blend-color-dodge:此类用于设置混合模式颜色减淡。
- mix-blend-color-burn:此类用于设置混合模式颜色加深。
- mix-blend-hard-light:此类用于设置混合模式硬光。
- mix-blend-soft-light:此类用于设置混合模式软光。
- mix-blend-difference:此类用于设置混合模式差异。
- mix-blend-exclusion:此类用于设置混合模式排除。
- mix-blend-hue:此类用于设置混合模式色相。
- mix-blend-saturation:此类用于设置混合模式饱和度。
- mix-blend-color:此类用于设置混合模式颜色。
- mix-blend-luminosity:此类用于设置混合模式亮度。
- mix-blend-plus-darker:此类用于设置混合模式加深。
- mix-blend-plus-lighter:此类用于设置混合模式加亮。
Tailwind CSS 混合混合模式类示例
以下示例将说明 Tailwind CSS 混合混合模式类实用程序。
设置元素的混合混合模式
在下面的示例中，我们将创建两个 div 并使用"mix-blend-*"来混合两个 div。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Mix Blend Mode
</h2>
<div class="flex -space-x-14">
<div class="mix-blend-multiply bg-red-800
w-36 h-36 rounded-full">
</div>
<div class="mix-blend-multiply bg-yellow-800
w-36 h-36 rounded-full">
</div>
</div>
</body>
</html>
悬停时更改混合模式
我们将混合模式保留为"mix-blend-multiply"，并在悬停在第二个 div 元素上时将其更改为"mix-blend-overlay"。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Mix Blend Mode
</h2>
<div class="flex -space-x-14">
<div class="mix-blend-multiply bg-red-800
w-36 h-36">
</div>
<div class="mix-blend-multiply bg-yellow-800
hover:mix-blend-overlay
w-36 h-36 ">
</div>
</div>
</body>
</html>
