Degradado translúcido en banners de categoría y legibilidad

beatriz96

Hola a todos,

Estoy intentando mejorar la legibilidad del texto descriptivo en los banners de categoría de mi tienda. Actualmente, tengo imágenes de categoría con texto superpuesto, y en algunos dispositivos móviles el texto blanco se pierde un poco con el fondo claro de la imagen. Mi idea es añadir un degradado oscuro translúcido sobre la imagen del banner para que el texto resalte más, pero sin oscurecer completamente la imagen. He intentado esto en themes/classic/assets/css/custom.css:

.category-cover {
  position: relative;
}
.category-cover .category-description {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));

El problema es que el degradado solo se aplica al bloque de texto de la descripción (.category-description), no a todo el banner, y a veces el h1 de la categoría queda por fuera o no se beneficia del todo. Necesito que el degradado cubra toda la altura de la imagen del banner, o al menos una buena parte, para que tanto el título como la descripción sean legibles.

¿Alguna idea de cómo puedo conseguirlo?

sergioseller97

Hola @beatriz96,

Entiendo perfectamente tu problema, es un clásico con el tema Classic y las imágenes de banner. Lo que te está pasando es que aplicas el degradado al .category-description, que es un elemento separado y más pequeño que la imagen de fondo. Por eso el h1 no lo coge y el degradado no cubre toda la imagen.

Para que funcione bien, el degradado debería ir en un pseudo-elemento (::before o ::after) del contenedor principal del banner (.category-cover), y ese pseudo-elemento debe tener un position: absolute que cubra el 100% del padre. Luego, asegúrate de que tu texto (h1 y .category-description) tenga un z-index superior para que quede por encima del degradado.

¿En qué versión de PrestaShop estás exactamente? Saber la versión (por ejemplo, 1.7.0.5 o una más reciente de la 1.7.x) podría ayudar, aunque para CSS no suele ser tan crítico.

Milo

Hola @beatriz96 y @sergioseller97,

@sergioseller97 ha dado en el clavo. El enfoque correcto es usar un pseudo-elemento. La versión 1.7.0.5 del Classic theme tiene una estructura que nos permite hacer esto sin problemas. El div.category-cover es el contenedor perfecto para aplicar este efecto.

El código que necesitas modificar en tu themes/classic/assets/css/custom.css sería el siguiente. Esto creará un overlay de degradado que cubrirá toda la imagen y asegurará que el texto blanco sea legible, sin importar la complejidad de la imagen de fondo. Lo importante es que el pseudo-elemento ::before cubra todo el category-cover y que el contenido del texto tenga un z-index más alto.

.category-cover {
  position: relative; /* Necesario para posicionar el pseudo-elemento */
  overflow: hidden; /* Opcional, por si acaso el contenido se desborda */
}
.category-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

Con esto, el ::before crea una capa oscura que se extiende por toda la altura y anchura del contenedor del banner, y luego el h1 y la descripción se colocan encima de esa capa. Prueba este código y me dices qué tal.

beatriz96

¡Increíble, @Milo! ¡Muchísimas gracias!

He implementado el código que me has dado en custom.css y el resultado es exactamente lo que buscaba. El degradado se ve muy profesional, cubre todo el banner y ahora el texto es perfectamente legible tanto en ordenador como en móvil. El z-index y el ::before han sido la clave.

¡Un problema menos y una tienda con mejor aspecto! De verdad, muchas gracias por tu ayuda tan rápida y precisa.