WebSite X5Help Center

 
Mirko C.
Mirko C.
User

Testo su sfondo immagine  it

Autor: Mirko C.
Visitado 873, Seguidores 1, Compartilhado 0  

Come sfondo, ho impostato un'immagine che a destra è scura e si schiarisce sulla sinistra.

Come testo, ho messo del testo bianco.

Problema: in versione desktop, nessun problema: il testo appare sulla parte scura dell'immagine, e si legge perfettamente.

Invece, in versione mobile, il testo va a sovrapporsi alla parte chiara dell'immagine e diventa poco leggibile.

Come risolvereste?

Publicado em
9 RESPOSTAS - 2 ÚTEIS - 1 CORRIGIR
Fabio C.
Fabio C.
User

Devi inserire questo codice al passo 3--->esperto--->prima della chiusura del tag HEAD:

</style>

@media (max-width:490px) {
.XXXXXX{
color:#000000!important;

}
</style>

XXXXXX è la cella che devi individuare e scrivere li, 000000 è nero inserisci il colore che ti serve.

Ler mais
Publicado em de Fabio C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

.. se posti il LINK si potrebbe capire, e faresti prima...

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User

Per il testo io opterei per un colore che si legge sia su sfondo chiaro sia su sfondo scuro. Per esempio #F90 (ma ce ne sono tanti altri)

Ler mais
Publicado em de Esse Di
Fabio C.
Fabio C.
User

Prova così, in grassetto è il colore del testo che in questo caso è nero ma lo puoi sostituire col colore che vuoi

<style>

@media (max-width:490px) {
.imCell_209{
color:#000000!important;

}

@media (max-width:490px)

.imCell_212{
color:#000000!important;

}

@media (max-width:490px)

.imCell_213{
color:#000000!important;

}
</style>

Ler mais
Publicado em de Fabio C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... con uno di questi due codici il testo sarà sempre visibile:

-

-----------------------------------

<style>#imCell_209 *, #imCell_212 *, #imCell_209 *, #imCell_213 * { text-shadow: 2px 2px 4px #000000;} </style>

-----------------------------------

<style> #imCell_209 *, #imCell_212 *, #imCell_209 *, #imCell_213 * { text-shadow: -1px 0 navy, 0 1px navy, 1px 0 navy, 0 -1px navy;} </style>

-----------------------------------

.

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Mirko C.
Mirko C.
User
Autor

Grazie mille.

Provo...

Ler mais
Publicado em de Mirko C.
Mirko C.
Mirko C.
User
Autor

<style>#imCell_209 *, #imCell_212 *, #imCell_209 *, #imCell_213 * { text-shadow: 2px 2px 4px #000000;} </style>

Grazie per le risposte. Ho provato il codice e funziona. Così, il testo è decisamente più leggibile.

Invece, non sono riuscito a cambiare il colore di sfondo al cambio di visualizzazione.

Sarebbe possibile far apparire lo sfodo blu (anziché l'immagine) al cambio di visualizzazione (da desktop a mobile) ?

Ler mais
Publicado em de Mirko C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... per sotto 720 pixel, prova ad aggiungere questo:

<style> @media (max-width:719px) { #imPageExtContainer {background: DodgerBlue url('') !important}} </style>

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪