Imagen de fondo no detectada del atributo styles
Los estilos que he definido para mi elemento no están disponibles en el gestor de estilos. Cuando haga clic en la casilla del lienzo, realmente esperaría ver todos los estilos que tiene en el gestor de estilos, en lugar de los estilos de la clase que Grapes ha añadido. Dijiste que el fondo no se muestra porque usa el...
Lee la respuesta completa abajo ↓Pregunta
Como el título + la imagen de fondo se elimina mediante el gestor de estilos al añadir una capa de fondo.
- Empezar: https://jsfiddle.net/5upe6myo/
- Imagen de fondo de nota
- Haz clic entre el texto. Debería aparecer como "Caja".
- En Estilos > Decoraciones, no se muestra la imagen de fondo.
- Al hacer clic en "+" junto al fondo se elimina la imagen de fondo.
Respuestas (3)
Los estilos que he definido para mi elemento no están disponibles en el gestor de estilos. Cuando haga clic en la casilla del lienzo, realmente esperaría ver todos los estilos que tiene en el gestor de estilos, en lugar de los estilos de la clase que Grapes ha añadido.
Dijiste que el fondo no se muestra porque usa el '.fluid-container.c318', pero añadir 'color: Pink' al atributo style sí muestra el color en la sección de tipografía. Eso es un poco inconsistente. Está captando el atributo 'color' pero no el de 'imagen de fondo'.
De hecho, así es como funciona el gestor de estilo con las clases. Cuando seleccionas la "Caja" puedes ver que has elegido el selector ".fluid-container.c318", que no tiene ningún bg, pero al desmarcar la clase "fluid-container", el selector actual será "c318" y ahora se muestra el bg. Probablemente debamos destacar mejor la herencia de estilos
Esto me parece un poco raro. Que las uvas añadan la clase 'c318' hace que mis estilos sean inalcanzables. Esperaría que el html y los estilos que se proporcionan sean editables.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1812
[Bug]: 404 al intentar añadir imagen de fondo (reproducible en la demo)
Visita https://grapesjs.com/demo.html en Chrome IncognitoHaz clic en el elemento "Cabecera"Haz clic en Decoraciones > FondoEliminar la capa...
Issue #2366
Text-shadow elimina los valores RGB cuando se selecciona el elemento
Ejemplo: https://jsfiddle.net/benvmatheson/g1ft06qh/8/ Importa un estilo con una propiedad de texto. 'Sombra-texto:rgb(51, 166, 58) 4px 4px...
Issue #5743
Vulnerabilidad XSS en el atributo iframe src
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Edge v122 Enlace de demo reproducible htt...
Issue #5334
La selección del tipo de componente personalizado no funciona en el lienzo
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome, Opera, Edge, etc Enlace de demo r...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.