Tailwind CSS Brillo de fondo

La clase de brillo de fondo se usa para aplicar y establecer el brillo de la imagen. Esta clase utiliza el multiplicador lineal de la imagen para aumentar o disminuir el brillo. Tailwind CSS recientemente agregó brillo de funciones en la versión 2.1.

Clases de brillo de fondo:

  • backdrop-brightness-0: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo de CSS (0).
  • backdrop-brightness-50: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (0.5).
  • backdrop-brightness-75: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (0,75).
  • backdrop-brightness-90: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (0.9).
  • backdrop-brightness-95: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (0,95).
  • backdrop-brightness-100: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (1.0).
  • backdrop-brightness-105: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (1.05).
  • backdrop-brightness-110: Esta clase se utiliza para establecer el brillo de un elemento, equivalente a CSS brightness1.10).
  • backdrop-brightness-125: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (1.25).
  • backdrop-brightness-150: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (1.50).
  • backdrop-brightness-200: esta clase se utiliza para establecer el brillo de un elemento, equivalente al brillo CSS (2.0).

Sintaxis:

<element class="backdrop-filter 
                backdrop-brightness-{amount}">
..
</element>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
        rel="stylesheet">
</head>
  
<body class="text-center mx-4 ">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Backdrop Brightness Class</b>
    <div class=" mx-16 mt-18 h-36 relative">
        <div class="absolute w-full py-18">
            <img class="rounded-lg object-cover" 
                  src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210605213323/Screenshot20210605213311.png" 
             alt="image">
        </div>
        <div class="relative h-32 flex overflow-x-auto space-x-4">
            <div class="flex-shrink-0 border-4 border-green-500 
                        backdrop-filter backdrop-brightness-75 w-1/3">
            </div>
            <div class="flex-shrink-0 border-4 border-green-500 
                        backdrop-filter backdrop-brightness-105 w-1/3">
            </div>
            <div class="flex-shrink-0 border-4 border-green-500 
                        backdrop-filter backdrop-brightness-150 w-1/3">
            </div>
        </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 *