Bulma es un marco CSS gratuito y de código abierto basado en Flexbox para crear hermosos sitios web receptivos. En este artículo, discutiremos la clase Overlay en Bulma.
Superposición significa cubrir una cosa con otra. Significa que podemos poner una cosa sobre otra para hacer una página web interactiva. Supongamos que queremos colocar texto sobre la imagen, entonces podemos hacerlo usando la clase de superposición.
Clase de superposición de Bulma:
- clase is-overlay : esta clase de modificador se usa para poner algún contenido en otro contenido. Cuando queremos colocar algo sobre otra cosa, esta clase es muy útil para nosotros.
Sintaxis:
<div class="card">
<div class="card-image">
<!-- Demo image -->
</div>
<div class="card-content is-overlay">
<!-- some content to be placed over the image -->
</div>
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="card"> <div class="card-image"> <figure> <img alt="GFG image" width="500" height="600" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </figure> </div> <div class="card-content is-overlay"> <h3 class="tag"> GeeksforGeeks Overlay content1 </h3> <h3 class="tag"> GeeksforGeeks Overlay content2 </h3> </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="card"> <div class="card-image"> <figure> <img alt="GFG image" width="500" height="600" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </figure> </div> <div class="card-content is-overlay"> <h3 class="has-text-white"> GeeksforGeeks Overlay content1 </h3> <h3 class="tag">GeeksforGeeks Overlay content2</h3> <br><br> <button class="button is-primary"> This is button1 </button> <button class="button is-primary"> This is button2 </button> </div> </div> </body> </html>
Producción:
Referencia : https://bulma.dev/classes/helpers/is-overlay
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA