Gradiente en banners de categoría para legibilidad

samueldev

Hola a todos,

Estoy intentando mejorar la presentación de los banners de mis categorías. La idea es simple: tengo una imagen de fondo para cada categoría y un título en blanco superpuesto. El problema surge cuando la imagen de fondo es muy clara o tiene zonas con mucho blanco, haciendo que el texto del título sea casi ilegible, especialmente en dispositivos móviles donde el banner se redimensiona.

Mi objetivo es añadir un degradado oscuro translúcido sobre la imagen del banner, justo por debajo del texto, para garantizar la legibilidad del título. He intentado esto en themes/classic/assets/css/custom.css usando un pseudo-elemento, pero el degradado no se aplica correctamente sobre el título, o el título sigue viéndose por debajo del degradado, o directamente no aparece:

.category-cover .category-cover-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
}

¿Alguna idea de por qué no funciona como espero o cómo debería abordarlo para que el texto blanco siempre sea visible? Gracias.

martabcn

Hola @samueldev, entiendo perfectamente lo que buscas. Ese problema de legibilidad en banners es muy común cuando las imágenes de fondo varían mucho. Tu CSS parece una buena base, pero me pregunto si el texto del encabezado (h1 o similar) está quedando por debajo de ese pseudo-elemento ::before o si el degradado no se ve porque el z-index de tu texto es menor al del degradado, o porque el ::before se aplica a la imagen y no al contenedor principal que envuelve al texto.

¿Qué versión exacta de PrestaShop utilizas? Y, ¿estás trabajando con el tema Classic o alguna modificación de él?

angelseller

Cierto, @martabcn tiene razón. En móvil es donde más se nota que el texto se pierde, sobre todo si la imagen tiene mucha información visual. Yo he intentado algo parecido y al final el problema era que el contenedor del texto no tenía un position: relative y un z-index superior para que funcionara bien. Tu ::before lo estás aplicando a .category-cover-img, que es la imagen, no el contenedor que envuelve a la imagen y al texto del título. Si el h1 está fuera de .category-cover-img, ese degradado nunca lo cubrirá. @samueldev, estoy en PrestaShop 8.2.2 también.

Milo

Hola @samueldev, el problema que describes es un clásico de la superposición de elementos en CSS, especialmente al trabajar con imágenes y texto en banners.

La clave está en cómo funcionan los contextos de apilamiento (z-index) y la aplicación de los pseudo-elementos. Tu ::before lo estás aplicando directamente a la etiqueta de la imagen (.category-cover-img), lo cual hace que el degradado se aplique dentro de la imagen. Para que el degradado cubra tanto la imagen como el texto, debe aplicarse al contenedor padre que envuelve a ambos, y luego asegurarnos de que el texto esté por encima de ese degradado.

Aquí te propongo una solución que puedes añadir a tu themes/classic/assets/css/custom.css:

.category-cover {
    position: relative; /* Establece un contexto de apilamiento */
    overflow: hidden; /* Ayuda a la responsividad */
}
.category-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

Con estos cambios:

Establecemos position: relative; en .category-cover para que sus hijos (::before y h1) puedan posicionarse absolutamente o relativamente dentro de él y respetar el z-index.
El ::before ahora se aplica al contenedor principal, cubriendo toda su área con el degradado.
Añadimos position: relative; y z-index: 2; al h1 (asumiendo que es el selector de tu título de categoría) para forzarlo a aparecer por encima del degradado (z-index: 1).
He añadido un text-shadow que, aunque opcional, puede mejorar aún más la legibilidad en ciertos fondos.

Asegúrate de que el selector h1 sea el correcto para el título de tu categoría. Pruébalo y me dices qué tal.

samueldev

¡Perfecto, @Milo! He aplicado tus cambios en custom.css y ahora el degradado se ve genial, y lo más importante, el texto del título de la categoría es perfectamente legible, incluso en móvil. La clave estaba en el position: relative en el contenedor principal .category-cover y en el h1 para que el z-index funcionara correctamente y el degradado cubriera todo. ¡Muchísimas gracias por la ayuda tan directa y clara!