Ejemplo de CSS dentro de un HTML que da características a un proyecto web, por ejemplo, e contenedor, o el banner. Coloque el código que aplicaría para esta parte.
Respuestas
Respuesta:
Ejemplo de CSS para un Banner
.banner{
height: 700px;
background: url("../img/banner.jpg") fixed center/cover;
display: flex;
align-items: center;
justify-content: center;
}
.banner::before{
content: "";
height: 100%;
width: 100%;
background:#11D99B;
opacity: 0.8;
}
Explicación
Si nos damos cuenta el único cambio que le haremos a un .banner es agregarle nuestra imagen con la propiedad background y cómo primer valor ubicar la ruta de nuestra imagen que en nuestro caso es url("../img/banner.jpg") después le agregaremos un efecto Parallax el cual le dará un toque dinámico y diferente con el valor fixed y cómo ultimo le daremos los valores center/cover, el valor center alineara vertical y horizontalmente nuestra imagen y el valor cover realizar la misma función que object-fit: cover la cual es no deformar nuestra imagen de fondo.
Pero nos hace falta el color y para agregarlo le pondremos a nuestro .banner el pseudoelemento ::before , a este pseudoelemento ::before le daremos un content vacío, después una altura del 100% heredada del padre que en nuestro caso fueron 700px, un ancho del 100% también, un color de fondo que será el #11D99B y por ultimo una opacidad del 0.8.