Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. Tailwind CSS Background, en el que se cubren todas las propiedades de esta clase. está controlando la parte de fondo de la página como una imagen de fondo que puede establecer una o más imágenes de fondo en elemento, clip de fondo, color de fondo, opacidad de fondo, etc.
- Imagen de fondo de Tailwind CSS
- Clip de fondo de Tailwind CSS
- Color de fondo CSS de Tailwind
- Tailwind CSS Opacidad de fondo
- Posición de fondo de Tailwind CSS
- Repetición de fondo de Tailwind CSS
- Tamaño de fondo de Tailwind CSS
- Paradas de color de degradado CSS de Tailwind
El siguiente ejemplo le dará una breve idea sobre los fondos de Tailwind CSS:
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS <span class="bg-clip-text text-lg text-transparent bg-gradient-to-r from-green-400 to-blue-500"> Background Clip Class </span> </b> <div class="mx-2 grid grid-cols-3 gap-2 bg-green-200 rounded-lg"> <div class="bg-clip-border p-6 bg-green-600 border-dashed border-4 border-green-300"> </div> <div class="bg-clip-padding p-6 bg-green-600 border-dashed border-4 border-green-300"> </div> <div class="bg-clip-content p-6 bg-green-600 border-dashed border-4 border-green-300"> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA