El último Bootstrap 5 está teniendo dificultades para agregar class="mask" a mi imagen de fondo. Ni siquiera funciona en absoluto.
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> </head> <body> <div class="d-flex justify-content-center align-items-center bg-image"> <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" /> <div class="mask " style="background-color:rgba(0, 0, 0, 0.6) ;"> <div class=" justify-content-center align-items-center b-100 "> <hi class="text-white"> product details </hi> </div> </div> </div> </body>Mask es parte de Material Design for Bootstrap ( mdbootstrap ), por lo que también debe incluir su CSS CDN
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" /> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" /> </head> <body> <div class="d-flex justify-content-center align-items-center bg-image"> <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" /> <div class="mask" style="background-color:rgba(0, 0, 0, 0.6) ;"> <div class="d-flex justify-content-center align-items-center h-100"> <h1 class="text-white"> product details </h1> </div> </div> </div> </body> <link rel="stylesheet" href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/core.min.css"> <div class="bg-image"> <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" alt="Louvre Museum" /> <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"> <div class="d-flex justify-content-center align-items-center h-100"> <p class="text-white mb-0">product details</p> </div> </div> </div>Se corrigió el enlace de Bootstrap y se agregaron clases útiles para colocar correctamente el div de texto en la imagen.