Tailwind CSS - 背景图片

Tailwind CSS 背景图片是一个指定元素背景图片的实用程序。

Tailwind CSS 背景图片类

以下是用于设置背景图片的Tailwind CSS 背景图片类的列表。

类	CSS 属性
bg-none	background-image: none;
bg-gradient-to-t	background-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-tr	background-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-r	background-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-br	background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-b	background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-bl	background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-l	background-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tl	background-image: linear-gradient(to top left, var(--tw-gradient-stops));

Tailwind CSS 背景图片类的功能

bg-none: 此类用于移除背景图片。
bg-gradient-to-t: 此类设置从下到上从一种颜色过渡到另一种颜色的渐变背景图片。
bg-gradient-to-tr: 此类设置从左下到右上从一种颜色过渡到另一种颜色的渐变背景图片。
bg-gradient-to-r: 此类设置从左到右从一种颜色过渡到另一种颜色的渐变背景图片。
bg-gradient-to-br: 此类设置从左上到右下从一种颜色过渡到另一种颜色的渐变背景图片。
bg-gradient-to-b: 此类设置从上到下从一种颜色过渡到另一种颜色的渐变背景图片。
bg-gradient-to-bl: 此类设置从右上到左下从一种颜色过渡到另一种颜色的渐变背景图片。
bg-gradient-to-l: 此类设置从右到左从一种颜色过渡到另一种颜色的渐变背景图片。
bg-gradient-to-tl: 此类设置从右下到左上从一种颜色过渡到另一种颜色的渐变背景图片。

Tailwind CSS 背景图片示例

下面的示例将演示不同的背景图片渐变效果。

示例

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

<body class="p-4"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Background Image Classes
    </h2>
    <div class="flex flex-wrap gap-3">
        <div class="bg-gradient-to-r from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-r
        </div>
        <div class="bg-gradient-to-tr from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-tr
        </div>
        <div class="bg-gradient-to-r from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-r
        </div>
        <div class="bg-gradient-to-br from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-br
        </div>
        <div class="bg-gradient-to-b from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-b
        </div>
        <div class="bg-gradient-to-bl from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-bl
        </div>
        <div class="bg-gradient-to-l from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-l
        </div>
        <div class="bg-gradient-to-tl from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-tl
        </div>
    </div>
</body> 

</html>

打印页面