El código personalizado funciona en todos los planes de pago (excepto en el plan Creator que ya ha sido archivado). Con un plan gratuito, puedes ver el código de trabajo funcionando en el modo vista previa, pero no en un proyecto publicado.
Con los blending modes (modos de mezcla), se puede utilizar una capa superior para modificar el aspecto del contenido subyacente. Vamos a probarlo con un widget de texto y una imagen debajo:
- Sube un archivo a través del widget de imagen y añade un widget de texto encima. Selecciona un color que te guste para el texto (nosotros lo haremos blanco).
- Encuentra el ID de tu widget de texto como se muestra aquí.
- Añade un widget de código y pega este código en la pestaña CSS. No olvides sustituir el fragmento
"PASTE WIDGET ID HERE"por el ID del paso 2, manteniendo las comillas.
El siguiente código funciona para el diseño de escritorio únicamente.
[data-id="PASTE WIDGET ID HERE"] {
mix-blend-mode: difference;
}
Hay más de una docena de blending modes en la especificación CSS. Aprende más sobre la propiedad mix-blend-mode en MDN Web Docs.