Clip de fondo de Tailwind CSS

Esta clase acepta más de un valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad CSS background-clip . Esta propiedad se usa para definir cómo extender el fondo (color o imagen) dentro de un elemento.

Clases de clips de fondo:

  • bg-clip-border: esta clase se utiliza para establecer el color de fondo distribuido en toda la división.
  • bg-clip-padding: esta clase se usa para establecer el fondo dentro del borde.
  • bg-clip-content: esta clase se usa para establecer el color de fondo solo para el contenido.
  • bg-clip-text: esta clase se utiliza para recortar el fondo de un elemento para que coincida con la forma del texto. Útil para efectos en los que desea que una imagen de fondo sea visible a través del texto.

Sintaxis:

<element class="bg-clip-{Clip type}">...</element>

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 skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *