Testo su sfondo immagine 
Autore: Mirko C.
Visite 890,
Followers 1,
Condiviso 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?
Postato il
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.
.. se posti il LINK si potrebbe capire, e faresti prima...
Autore
http://www.blustring.it/
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)
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>
... 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
.
Autore
Grazie mille.
Provo...
Autore
<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) ?
... per sotto 720 pixel, prova ad aggiungere questo:
<style> @media (max-width:719px) { #imPageExtContainer {background: DodgerBlue url('') !important}} </style>
.